怎么用2级目录做网站,wordpress role,小程序搭建公司,网站建设开发外包公司相关链接#xff1a;H5 video 的使用H5 video 全屏播放♢ video点播与直播H5 video目前所有浏览器都支持的视频格式是MP4格式#xff0c;所以mp4应当是点播web视频的首选格式。而在直播视频上#xff0c;H5 video只在移动端原生支持HLS流的直播视频(Mac safari video标签也支…相关链接H5 video 的使用H5 video 全屏播放♢ video点播与直播 H5 video目前所有浏览器都支持的视频格式是MP4格式所以mp4应当是点播web视频的首选格式。而在直播视频上H5 video只在移动端原生支持HLS流的直播视频(Mac safari video标签也支持 PC Chrome不支持)其他直播流如FLV就需要Flash插件的支持。♢ video与206状态码video播放mp4时发的依然是get请求但http返回206状态码 即partial Content。有关206状态码的相关内容可以参考下文Http协议206状态码♢ 终止视频下载video.pause() 可以暂停视频播放但并不能停止视频资源的继续加载媒体元素会继续加载知道被垃圾回收机制回收。要在暂停播放后立即停止可使用以下方法video.pause()
video.src
video.removeAttribute(src);复制代码♢ 防止iOS上默认全屏播放ios10及以后的版本可以通过给video标签加playsinline属性防止iOS默认全屏播放ios9之前加webkit-playsinline属性如果要兼容则把两个属性都加上。通过客户端添加配置UIwebview: webview.allowsInlineMediaPlayback YES不过还是要求在video元素上加playsinline属性参考HTML5 inline video on iPhone vs iPad/Browser allowsInlineMediaPlayback♢ 自动播放及播放控制在移动端有些浏览器支持添加autoplay属性后自动播放有些设置 autoplay 和 muted属性也能自动播放比如IOS 10、Chrome。如果想控制什么时候播放且并不是用户触发的如没有设置controls那就设置muted属性然后调用video.play()方法隔300ms左右有后再通过video.muted false打开声音。vide.muted true;
video.play()
setTimeout(function () {video.muted false
}, 300)复制代码iOS9及之前的版本要求有用户交互才能播放即手动点击播放按钮或者有用户触发的click、touchend、键盘等事件然后调用video.play() 方法播放。在iOS9之前iOS Native可以通过UIWebView的mediaPlaybackRequiresUserAction属性来控制是否需要用户交互。使用element.click()触发的click事件是否可以被人为是用户行为不能浏览器是如何知道是否是用户触发的事件Event对象的只读属性isTrusteddiv idtest-ele这个元素监听事件/div
scriptconst testEle document.querySelector(#test-ele);testEle.addEventlistener(click, function (evt) {// 用户触发为truescript或EventTarget.dispatchEvent() 触发为falseconsole.log(evt.isTrusted);}, false);testEle.click() // 这个触发evt.isTrusted false
/script复制代码有关iOS 10对safari video的放松策略可以参考 New video Policies for iOS♢ video.play() 的Promise对象可用于捕获视频播放错误在Chrome上如果没有设置video.muted属性在非用户行为下直接使用video.play() 播放会收到 Uncaught (in promise) DOMException 的报错视频也没有播放。在iOS下面可能不会有任何报错视频也没播放这样就无法定位问题。video.play() 会返回一个Promise对象如果播放失败可以通过返回的Promise catch到相关错误信息。const pro video.play();
if (pro) { // iOS9及以下版本不会返回Promise对象做下兼容处理pro.catch(err{ console.log(err) });
}复制代码♢ TimeRanges 对象在开始获取played属性的时候以为会返回一个已经播放的时长实际上返回的是TimeRanges对象而且看到TimeRanges的length一直不变当时一脸摸不着头脑不知道有什么用。后来在做进度控制需要知道视频已缓冲多少时才弄明白。video DOM对象有三个属性会返回TimeRanges对象分别为video.played/ video.buffered/ video.seekable视频开始时只有一个播放时间段如果不进行跳跃观看就一直只有一个时间段即 TimeRanges.length 值为1如果进行了跳跃观看如从2分钟突然跳进到15分钟的位置而跳跃内容并没有缓冲完毕则会出现两个时间段这时TimeRanges的length为2。所以TimeRanges个数会随着跳跃观看未缓冲完成的内容而增加随着缓冲的完成而减少最少为1个即从开头到结尾。------------------------------------------------------|| || |------------------------------------------------------0 5 15 19 21TimeRanges对象有一个length属性和start()、play()两个方法TimeRanges: length: 1 // 代表当前播放视频存在的播放段 play(index) // 获取指定播放段的播放缓冲开始时间index从0开始取以秒计 end(index) // 获取指定播放段的播放缓冲结束时间 要获取第一段的开始时间使用TimeRanges.start(0)结束时间为TimeRanges.end(0)第二段TimeRanges.start(1)以此类推参考Media buffering, seeking, and time ranges: developer.mozilla.org/en-US/docs/…TimeRanges: developer.mozilla.org/en-US/docs/…♢ video的宽高video视区的高宽根据视频源有不同的固定比例但并不会出现因video标签或其容器的高宽设置比例与视频源比例不一致而出现拉伸、变形会自动根据设置的高宽中较小的值按照自身的比例进行缩放不足的会两边补白居中。如视频的原始尺寸为640 * 360设置video高400、宽800高度的增长跟宽度的增长不成比例宽度会比视宽度宽则video会左右补白视区居中。转载于:https://juejin.im/post/5ce037c46fb9a07f0b039234
