h5新标签video详解_video对象操作函数-程序员宅基地

HTML5播放器细谈,从大众自带浏览器 到 wechat和QQ以x5内核的浏览器,以及UC其他特殊的浏览器在此不再细谈:)当然也会分析iphone iOS系统和Android手机系统的差别。

【基本属性】video标签

属性:

src :视频的属性,url地址
poster:视频封面,没有播放时显示的图片
preload:预加载|none|metadata(部分预加载)|auto。默认为auto
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制条
width:视频宽度
height:视频高度
其中: src地址可控制播放区域(调取native播放器(qq,uc等浏览器)的除外) 
【示例】 http://xxxx.com/video.mp4#t=10,20   表示播放范围10s-20s;
t=,02:00:00 从开始到两小时;t=6060s开始;t=,10.5 开始到10.5s
 
 
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

【HTML样例】

代码:

 <video id="cc-video-player" src="sourceLocation" controls width="400px" heigt="400px"></video> 
 
 
  
  • 1
  • 1

【获取video对象】

 var ccMediaObj = document.getElementById("cc-video-player"); 
 
 
  
  • 1
  • 1

【Media 方法及属性】

HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

【媒体错误】
ccMediaObj.error; //null:正常
ccMediaObj.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
【媒体当前状态】
ccMediaObj.currentSrc; //返回当前资源的URL
ccMediaObj.src = value; //返回或设置当前资源的URL
ccMediaObj.canPlayType(type); //是否能播放某种格式的资源
ccMediaObj.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
ccMediaObj.load(); //重新加载src指定的资源
ccMediaObj.buffered; //返回已缓冲区域,TimeRanges
ccMediaObj.preload; //none:不预载 metadata:预载资源信息 auto:
【准备状态】
ccMediaObj.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
ccMediaObj.seeking; //是否正在seeking</p> <p>
【回放状态】
ccMediaObj.currentTime = value; //当前播放的位置,赋值可改变位置
ccMediaObj.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
ccMediaObj.duration; //当前资源长度 流返回无限
ccMediaObj.paused; //是否暂停
ccMediaObj.defaultPlaybackRate = value;//默认的回放速度,可以设置
ccMediaObj.playbackRate = value;//当前播放速度,设置后马上改变
ccMediaObj.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
ccMediaObj.seekable; //返回可以seek的区域 TimeRanges
ccMediaObj.ended; //是否结束
ccMediaObj.autoPlay; //是否自动播放
ccMediaObj.loop; //是否循环播放
ccMediaObj.play(); //播放
ccMediaObj.pause(); //暂停
【视频控制】
ccMediaObj.controls;//是否有默认控制条
ccMediaObj.volume = value; //音量
ccMediaObj.muted = value; //静音

【TimeRanges(区域)对象】
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

【★★★**相关事件**★★★】
//事件分发
var eventTester = function(e){
    
    Media.addEventListener(e,function(){
    
        console.log((new Date()).getTime(),e)
    },false);
}
//事件监听
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起)
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据,并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变
`
abort原因:
abort 事件在音频/视频(audio/video)终止加载时触发。
该事件是在多媒体数据终止下载时触发,而不是发生错误时触发。
提示: 影响多媒体数据加载的事件有:
emptied
error
stalled
suspend``

【兼容性问题】
-------
主要针对 UC、QQ、微信浏览器的兼容性。占了所有用户的80%以上,82法则,就先不考虑其他浏览器了。

【QQ浏览器】
qq浏览器劫持了所有的video标签,然后生成一个等宽高的native播放,所以无论如何设置z-index都是无用的。
**解决方法:** iframe,动态插入video标签,可以尝试。不过目前还没有很好的兼容性。据说只有开了白名单的域名网站才能幸免。
**参考解决:** 爱奇艺(http://m.iqiyi.com/),乐视,优酷,腾讯视频自己似乎摆脱了qq植入native播放器的问题,不过不知是否是开了 白名单,据消息称是需要和腾讯合作才可以。如果不服,可以模仿尝试一下:) 优土一家人,优酷摆脱了,然而土豆依旧没有摆脱,搜狐,哔哩哔哩,新浪等其他视频网站依旧没有摆脱。

【UC浏览器】
UC浏览器与QQ浏览器的行为类似。
**解决方法:** 同样没有很好的方式。 爱奇艺依旧可以正常调取ios内置web播放器。但是腾讯也被劫持了,同样乐视,优酷等在qq浏览器中没有被劫持的视频网站,在UC中也被劫持了。 
**UC相对QQ优势:** UC虽然劫持了video,但是UC仍旧支持h5的大部分video事件,可谓是深度劫持,提供了部分控制接口。然而,QQ浏览器则完全是native组件,不受前端h5的控制,对于开发者而言不够友好。

【不支持video标签】
<video> 标签不被支持时可以使用Flash播放Flash格式的媒体资源。
ios不支持flash播放。

【微信浏览器】
**IOS:** 基本没影响,微信对于ios中的video只是统一的控制界面,但是功能全面而强大。同时支持inline播放,而无需强制全屏。
**Android:** 与QQ浏览器类似,被劫持。具体分析见qq浏览器。

 
 
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103






【补充兼容性】
-------



【自制video播放器】
------------
**示例:** 以下是一份动态加入video元件,并可以控制静音的功能示例:
*muteVideo是静音状态切换函数
*playVideo函数在没有video控件时会添加一个控件,如果已经存在就播放
 
 
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

function addSourceToVideo(element,src,type) 

var source = document.createElement(‘source’); 
source.src = src; 
source.type= type;

element.appendChild(source); 
}

function insertVideo(src,type,width,height) 

var vid = document.createElement(“video”);

vid.controls=”controls”; 
vid.width = width; 
vid.height=height; 
vid.id = “video_control”; 
vid.muted= false;

addSourceToVideo(vid,src,type);

document.getElementById(“show”).appendChild(vid); 
}

function muteVideo() 

var vid = document.getElementById(“video_control”);

if(vid == undefined) 
return;

if (vid.muted==undefined || !vid.muted) 

vid.muted = true; 

else 

vid.muted = false; 

}

function playVideo() 

var video = document.getElementById(“video_control”);

if(video==undefined)  
{  
 insertVideo("files/happyfit2.mp4","video/mp4",604,256);  
 video = document.getElementById("video_control");  
}  

video.play(); 

“`

【参考资源】

1.自制video播放器demo: http://zqiong.cn/myplugins/video.html 
2.audio/video集合帖子: 
http://www.360doc.com/content/15/0317/14/14006402_455807117.shtml 
3.相对比较老的 问题集锦: http://blog.csdn.net/cdnight/article/details/40303825 
4.自画播放缓冲区: 
https://developer.mozilla.org/zh-CN/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges 
5.【好文】 
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

【准备研究的课题】

1.使用 video.js 开发 Html5 视频页面: 
http://www.tuicool.com/articles/7jYvQrR

2.使用 HTML5 音频和视频: 
http://211.137.54.207:8080/portal//onlinecmcctvfreeTm.jsp;jsessionid=E561A7853472EB42D253301487C86391?wlanacname=0002.0712.270.00&wlanuserip=10.7.104.184&ssid=CMCC-TV

3.移动端测试:html5中video标签的总结: 
http://www.w3cfuns.com/notes/13237/958727b4ca894475ab5db599b937ba70.html

4.Html5 Video 实现方案: 
http://www.cnblogs.com/lizeyan/p/5549159.html

https://www.html5rocks.com/zh/tutorials/video/basics/ 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gertYY/article/details/70157388

智能推荐

基于Java+SpringBoot+vue+element实现校园闲置物品交易网站_基于springboot+vue的校园购物网站-程序员宅基地

文章浏览阅读1w次,点赞74次,收藏214次。校园闲置物品交易网站的设计基于现有的网络平台,可以实现用户管理及数据信息管理,方便管理员对后台进行管理有详细的了解及统计分析,随时查看信息状态。主要功能设计: 1、开发实现校园闲置物品交易网站的整个系统程序;2、管理员;首页、个人中心、用户管理、商品类型管理、商品信息管理、系统管理、订单管理等。_基于springboot+vue的校园购物网站

mmcv 对比 cv2 处理视频速度_mmcv和opencv-程序员宅基地

文章浏览阅读990次。import osimport timesource = './11/2021-4-13-10-41-51.mp4'# 将视频转成图片序列后的分辨率new_width = 224new_height = 224import mmcvs = time.time()# 读取视频video = mmcv.VideoReader(source)if video is None : print('Warning: unable to open video source: ', sou._mmcv和opencv

python APScheduler 执行定时任务_apscheduler 每5s执行-程序员宅基地

文章浏览阅读7.3k次,点赞4次,收藏26次。入门任务:每隔5s打印一个1from apscheduler.schedulers.background import BackgroundScheduler, BlockingSchedulerscheduler = BlockingScheduler()def func(): print(1)job = scheduler.add_job(func, trigger..._apscheduler 每5s执行

第四题:猫狗队列问题_class pet class cat extends pet-程序员宅基地

文章浏览阅读434次。题目要求:现有猫狗类如下:class Pet{ private String type; public Pet(String type){ this.type = type; } public String getType() { return type; }}class Dog extends Pet{..._class pet class cat extends pet

Android.graphics.Camera-程序员宅基地

文章浏览阅读2.3k次。概要:Camera(相机),但是这里的android.graphics.Camera不同于hardware.Camera。它主要用于2d图像实现3d效果。Camera的一系列,旋转,平移方法。实质上改变的是内部的Matrix变量。最后我们可以通过camera.getMatrix(matrix)方法。获取Matrix的值。之后就可以通过Matrix来改变图像了。分析:_android.graphics.camera

倒计时计时器:Android电商倒计时,源码和教程-程序员宅基地

文章浏览阅读55次。countdown一个简单的计时器提供了一些方法设置marginpublic void setLinearLayoutMargin(int left, int top, int right, int bottom)public void setTextViewMargin(int left, int top, int right, int bottom)设置Paddingpublic void s..._倒计时app源码

随便推点

MDK编译出现的问题。_adc1_2_irqn = 18, /*!< adc1 and adc2 global interr-程序员宅基地

文章浏览阅读2.6k次,点赞5次,收藏17次。1、出现 ADC1_2_IRQn = 18, /*!< ADC1 and ADC2 global Interrupt */编译错误问题。解决方法如下:打开“魔法棒”,选中C/C++选项,然后把define中的“STM32F10X_HD,USE_STDPERIPH_DRIVER”改为“STM32F10X_ MD,USE_STDPERIPH_DRIVER”。我的工程由于移植到新的开发板并且芯片的确不是属..._adc1_2_irqn = 18, /*!< adc1 and adc2 global interrupt */

python rsa加密长度_python3 rsa加密-程序员宅基地

文章浏览阅读150次。遇到了跟你一样的问题。 此js封装的源码 如下。希望看到的大神解决了的话帮我一下。/*RSA, a suite of routines for performing RSA public-key computations in JavaScript.Copyright 1998-2005 David Shapiro.Dave [email protected] by Fuc..._rsa hexatrigesimaltochar

(每日一练c++)CC196 找出字符串_给定一个string数组str,其是由一个排过序的字符串数组插入了一些空字符串得到的,-程序员宅基地

文章浏览阅读115次,点赞3次,收藏3次。描述给定一个string数组str,其是由一个排过序的字符串数组插入了一些空字符串得到的,同时给定数组大小n和需要查找的stringx,请用时间复杂度在log级别的算法返回该串的位置(位置从零开始)。测试样例:["a","b","","c","","d"],6,"c"返回:3class Finder {public: int findString(vector<string> str, int n, string x) { int size ._给定一个string数组str,其是由一个排过序的字符串数组插入了一些空字符串得到的,

COM组件设计与应用(十六)---连接点(vc.net)_[default, source]-程序员宅基地

文章浏览阅读536次。COM组件设计与应用(十六) 连接点(vc.net) 作者:杨老师 下载源代码 一、前言   上回书介绍了回调接口,在此基础上,我们理解连接点就容易多了。 二、原理 图一、连接点组件原理图。_[default, source]

python flask框架发布问答平台注册页面_使用Python的Flask框架表单插件Flask-WTF实现Web登录验证...-程序员宅基地

文章浏览阅读71次。表单是让用户与我们的网页应用程序交互的基本元素。Flask 本身并不会帮助我们处理表单,但是 Flask-WTF 扩展让我们在我们的 Flask 应用程序中使用流行的 WTForms 包。这个包使得定义表单和处理提交容易一些。Flask-WTF我们想要使用 Flask-WTF 做的第一件事情(在安装它以后,GitHub项目页:https://github.com/lepture/flask-wtf..._python flask 问卷

python类和对象的定义_Python类和对象的定义与实际应用案例分析-程序员宅基地

文章浏览阅读77次。本文实例讲述了Python类和对象的定义与实际应用。分享给大家供大家参考,具体如下:1.DVD管理系统# -*- coding:utf-8 -*-#! python3class dvd:def __init__(self,name,price,state):self.name=name;self.price=priceself.state=statedef __str__(self):stat='..._if self.state in self.operations