自Html5普及以来，新加入的标签和功能也开始被流行使用。其中与媒体相关的Video Audio 更是其中最火的几个关键词！
今天就来说一下最近使用<Video/>遇到的坑。
1. Video 标签属性
Video本身的属性并不多，你甚至看他的英文名词都知道这个属性是干什么的。
用例及解释都可以去Video用例 查看API
其中有几个未标明属性（坑），主要是与手机兼容相关的！
eg: playsinline、webkit-playsinline
问题: 在safari浏览器中，播放后不会自动全屏的问题！
解决： 加上 上面两个属性可解决
<video id="video" controls="controls" webkit-playsinline="true">
<source src="test.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
2. Video 对象属性
这个属性就有点多，有时候也会遇到莫名其妙的坑。先来看属性
很多，不需要全部记住，真的要使用时，再查api 也来得及。接下来说一下坑
坑1 duration属性
先来看下duration的用法和试例
定义和用法
duration 属性返回当前视频的长度，以秒计。
注意： 不同的浏览器返回不同的值。在以上实例中 Internet Explorer, Firefox 和 Chrome 浏览器返回 "12.612"。 Safari 返回 "12.612000465393066", Opera 12 返回 "12.585215419", 但 Opera 18 返回 "12.62069"。
var x = document.getElementById("myVideo").duration;
看起来非常简单。 但是我们想一下实际的使用情况
- 大多数Video 都不会预先播放， 即preload=false, 甚至有人会给标签加上 loaded=true。就是避免视频在用户未点击时，就进入下载缓冲。
- 但有时，这些属性在某些手机浏览器上是无效的， 那就只有 在Video 标签的src上做手脚。 eg：页面即使加载完毕了，Video 也没有src的值；必须在用户点击播放之后再动态的加上，并开始播放。
正因为以上两点，src的值与video.play()方法 是一个动态的操作， 这时你会需要拿到视频的总长度，也就是duration。可能该值会是后台传给你的，但如果没有就需要用到 .duration这个属性。
你可能会这样写
var x = document.getElementById("myVideo")
x.play().
var duration = x.duration; // duration = NaN
....然后给某个标签赋值duration,但却发现是NaN
x.play()是需要时间解析 video.src 上的地址的。那就只有监控 什么时候能拿到了。
Video 的对象、标签、方法都有了，但却缺失了事件
3. Video的事件
QQ图片20170831172620.png
你可以使用 其中 ondurationchange、onloademetadata等任何一个事件来监控是否该视频已经准备就位
这样你就可以准确的拿到duration的值了
video.play();
video.ondurationchange=function(){
var x = video.duration
...
///赋值的操作
}
还有几个坑容之后更新再说，也还有很多没遇到的坑，以后都在简书更新了！
欢迎关注我的github，不定期更新一些新的前端玩意
网友评论