H5 video标签的用法及问题
关于HTML5视频标签的问题
一、基本
video标签在兼容性上还是比较差的，如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。但是由于H5在移动设备上展现，基本都是使用webkit内核，只需要考虑Android、IOS设备上的差异。
浏览器不支持/正在加载中 (指定的视频都不能播放时，返回的内容)
video标签有src、poster、preload、autoplay、loop、controls、width、height等几个属性， 以及一个内部使用的标签。
1、src
就是媒体文件的URL，不用这个标签也可以使用内部标签，但是个人觉得用src好看些~同样各个浏览器对媒体文件的格式有要求，就支持3种格式ogg、mp4、webM，兼容性如下
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
2、poster
用于指定一张图片的URL，在当前视频数据无效时显示。视频数据无效可能是视频正在加载，可能是视频地址错误等等。这个属性还是蛮有用处的，特别是在网络情况不怎么样的时候，把视频的一帧图片放在那，然后当视频播放时就没有违和感。
3、preload
此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。
None：不进行预加载;
Metadata：部分预加载（包括尺寸，第一帧，曲目列表，持续时间等等）;
Auto：全部预加载;
4、autoplay
用于设置视频是否自动播放，出现时，表示自动播放，去掉是表示不自动播放。（移动设备需考虑功能是否可用）
5、loop
用于指定视频是否循环播放
6、controls
如果出现该属性，则向用户显示控件，控制栏须包括播放暂停控制，播放进度控制，音量控制等等。
7、width、height
宽度、高度
二、方法和事件
var video = document.getElementById(“video”);
1、属性和方法
a、错误
video.error; //null:正常
video.error.code; //返回错误编码 1.用户终止 2.网络错误 3.解码错误 4.URL无效
b、网络状态
video.currentSrc; //返回当前资源的URL
video.src = value; //返回或设置当前资源的URL
video.canPlayType(type); //是否能播放某种格式的资源
video.networkState; //返回网络状态码 0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
video.load(); //重新加载src指定的资源
video.buffered; //返回已缓冲区域
video.preload; //返回预加载信息 none:不预载 metadata:预载资源信息 auto:
c、播放状态
video.currentTime = value; //当前播放的位置，赋值可改变位置
video.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
video.duration; //当前资源长度 流返回无限
video.paused; //是否暂停
video.defaultPlaybackRate = value;//默认的回放速度，可以设置
video.playbackRate = value;//当前播放速度，设置后马上改变
video.played; //返回已经播放的区域，TimeRanges
video.ended; //是否结束
video.autoPlay; //是否自动播放
video.loop; //是否循环播放
video.play(); //播放
video.pause(); //暂停
d、视频控制
video.controls;//是否有默认控制条
video.volume = value; //音量
video.muted = value; //静音
2、事件
video.addEventListener(“XXX” , function(){
//…
})
XXX是事件类型
loadstart //客户端开始请求数据
progress //客户端正在请求数据
suspend//延迟下载
abort //客户端主动终止下载（不是因为错误引起）
loadstart //客户端开始请求数据
error //请求数据时遇到错误
stalled //网速失速
play //play()和autoplay开始播放时触发
pause//pause()触发
loadedmetadata //成功获取资源长度
waiting//等待数据，并非错误
playing//开始回放
canplay//可以播放，但中途可能因为加载而暂停
canplaythrough//可以播放，歌曲全部加载完毕
seeking //寻找中
seeked//寻找完毕
timeupdate //播放时间改变
ended//播放结束
ratechange//播放速率改变
durationchange //资源长度改变
volumechange //音量改变
三、开发中遇到的坑
1、mp4文件在浏览器中只能播放音频部分，视频部分不显示
这是开发时最开始遇到的问题，因为视频是用单反录的，经过滤镜、剪辑等处理导出AVI格式，然后通过格式工厂转成mp4，但是在浏览器中硬是没有视频显示只有音频的声音。最后确定是视频转换是编码的问题，格式工厂在转换时可以选择一些编码格式，包括MPEG2、MPEG4、AVC、WMV2等等。选择AVC就好了，当时也是醉了
2、mp4文件在苹果设备的浏览器上不能播放，android上是好的
播放按钮上一个大大的斜杠，表示不能播放，当时心中泪崩啊。经过问题查找，是因为http协议中没有rang请求头，具体跟IOS的播放器如何使用http协议进行mp4解析有关。最方便快捷的解决办法就是使用nginx存放mp4文件。
http头的Range、Content-Range表示http断点续传
Range
用于请求头中，指定第一个字节的位置和最后一个字节的位置，一般格式：
Range:(unit=first byte pos)-[last byte pos]
Content-Range
用于响应头，指定整个实体中的一部分的插入位置，他也指示了整个实体的长度。在服务器向客户返回一个部分响应，它必须描述响应覆盖的范围和整个实体长度。一般格式：
Content-Range: bytes (unit first byte pos) - [last byte pos]/[entity legth]
请求下载整个文件:
GET /test.rar HTTP/1.1
Connection: close
Host: 116.1.219.219
Range: bytes=0-801 //一般请求下载整个文件是bytes=0- 或不用这个头
一般正常回应
HTTP/1.1 200 OK
Content-Length: 801
Content-Type: application/octet-stream
Content-Range: bytes 0-800/801 //801:文件总大小
3、IOS设备自动播放不生效，必须要手动调用play()方法
autoplay真的是个蛮没有什么作用的属性，IOS中不能自动播放，需要JS调用play()方法，解决办法就是
在html文件head标签中加入上述JS代码
4、在部分android设备上无法播放
无法播放是指autoplay这个属性没有用，同时调用play()方法同样然并卵
具体情况是，在播放时需要判断用户的手机类型，IOS和Android设备分开处理
var isiOS = !! navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
然后IOS设备直接使用autoplay这个属性或者调用play()方法，android这边需要在video之上加一张图片，通过点击图片然后播放，100ms之后设置视频时间为1S，然后再次播放，就OK了
$(video).css({
display: “block”
});
$(".androidBegin").show();
$(".androidBegin").bind(“touchstart”, function(a) {
video.play();
setTimeout(function() {
video.currentTime = 1;
video.play();
}, 100)
$(".androidBegin").hide();
$(video).unbind(“touchstart”);
})
如果不加入点击事件，直接调用点击事件内的播放代码，那么该视频就直接结束了，感觉好奇葩，然后就是连续播放多个视频，只需要第一个使用上述代码进行触发就行，之后的视频直接调用play()方法即可
H5 video标签的用法及问题相关推荐
- H5 video 标签的用法及问题
h5的video标签的用法及问题 关于HTML5视频标签的问题 一.基本 *video标签在兼容性上还是比较差的,如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8 ...
- vue中使用h5 video标签实现弹窗播放本地视频
参考h5 < video >标签的用法 在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭 父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入 ...
- 微信公众号网页 H5 video 标签自动播放
目录 微信公众号网页 H5 video 标签自动播放 问题描述 解决方案 微信公众号网页 H5 video 标签自动播放 环境:微信公众号网页 需求:H5 video 标签自动播放视频 video 标 ...
- H5 video标签封面
H5 video标签封面 使用视频的第一帧作为video标签的封面 <video src="地址" poster="地址+ '?x-oss-process=vide ...
- 关于H5中的video/video标签的用法总结
写了一个H5播放视频的功能, 遇到一些问题,记录一下,借鉴了一些博友的文章,如果有侵权请联系删除 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意 ...
- h5的video标签的用法及问题
关于HTML5视频标签的问题 一.基本 video标签在兼容性上还是比较差的,如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8的(Opera.Mozilla.Ch ...
- H5 VIDEO标签视频黑屏的原因及解决方法
<video style="width:90%;height:300px;" controls="" poster="/upload/image ...
- H5 video标签播放MP4
1.使用source标签 2.source标签type改为video/mp4 3.确认播放的MP4编码为h264 <video id="video-player" muted ...
- H5 iframe标签的用法
功能:iframe标签用于定义内联框架. 语法:<iframe></iframe> 注意: 在很多网页上使用某些公共部分时,需要给iframe 设置宽度,不然内容只会显示一部分 ...
最新文章
- SQLSERVER 性能优化统计信息
- iOS标准时间与时间戳相互转换
- 命令行下jq才是JSON 处理利器呀
- Java的getcelltype用法_java getCellType的替代方法
- gin的Bindxxx和ShouldBindxxx的区别
- 使用echarts（一） 第一次使用echarts
- 带鉴权信息的SIP呼叫
- SpringBoot实现简易支付宝网页支付
- 影创发布首款头手6DoF MR眼镜鸿鹄，搭载高通骁龙XR2平台
- html5 自动连接指定wifi,如何更改是否自动连接某一WIFI
- UnRAR.dll解压rar文件
- 重置海康威视DS-2TD2617B-6/PA测温摄像头
- 视频教程-项目管理12个微案例-项目管理
- android开发 重启app
- 无迹卡尔曼滤波UKF_代码及调参(2)
- 如何将多个PDF文件合并为一个PDF，4种工具推荐，适用手机和PC
- Python爬虫实战，requests+xpath模块，Python实现爬取豆瓣影评
- Vue.js搭建移动端购物车界面－基本结构和数据渲染
- Kettle邮件发送
- 阿里巴巴-鹿班实验室算法实现系列