模板网站怎么做卖,查找网站,网站开发的总结,云相册网站怎么做网页中的video 属性和事件#xff0c;用于计算观看视频的时长#xff0c;其他用法备存。
!-- video 不支持 IE8及以下版本浏览器#xff0c;支持三种视频格式#xff1a;MP4#xff0c;WebM 和 Ogg --video srctest.mp4 controls width400… 网页中的video 属性和事件用于计算观看视频的时长其他用法备存。
!-- video 不支持 IE8及以下版本浏览器支持三种视频格式MP4WebM 和 Ogg --video srctest.mp4 controls width400 height300/video!-- 禁止下载 --video srctest.mp4 controls controlslistnodownload width400 height300/video!-- 禁止下载禁止全屏 --video srctest.mp4 controls controlslistnodownload nofullscreen width400 height300/video!-- 自动播放 不同浏览器的表现不一样 --video srctest.mp4 controls autoplay width400 height300/video!-- 默认静音播放可手动点开继续播放 --video srctest.mp4 controls muted width400 height300/video!-- 循环播放 --video srctest.mp4 controls loop width400 height300/video!-- 预加载 --video srctest.mp4 controls preload width400 height300/video!-- 贴图 --video srctest.mp4 posterposter.jpg controls width400 height300/video!-- 音量控制 --video srctest.mp4 posterposter.jpg controls width400 height300 id_volume/videoscriptvar video document.getElementById(_volume)video.volume 2 // 取值范围0 到 10 是静音0.5 是一半的音量1 是最大音量默认值/script!-- 播放时间控制 --video srctest.mp4 posterposter.jpg controls width400 height300 id_time/videoscriptvar video document.getElementById(_time)console.log(video.currentTime) // 视频当前正在播放的时间单位s进度条拖到哪就显示当前的时间video.currentTime 60 // 默认从60秒处开始播放/script!-- 播放地址切换 常见于切换超清 高清 流畅不同画质的视频地址不同 --video srctest.mp4 controls autoplay width400 height300 id_src/videoscriptvar video document.getElementById(_src)console.log(video.src) // http://127.0.0.1:8001/test.mp4 绝对地址DOM 中是相对地址// video.src test-2.mp4 // 直接替换掉了原来的视频srcsetTimeout(() {video.src test-2.mp4 // 播放到第 30s 的时候自动切换视频}, 30000)/script!-- 备用地址切换 --video controls autoplay width400 height300 id_sourcesource srctest3.mp4 typevideo/mp4 /source srctest9.mp4 typevideo/mp4 /source srctest-2.mp4 typevideo/mp4 //videoscriptvar video document.getElementById(_source)setTimeout(() {console.log(video.currentSrc) // http://127.0.0.1:8001/test.mp4}, 1000)// HTTP 载入失败状态码 404。媒体资源 http://127.0.0.1:8001/test3.mp4 载入失败。// HTTP 载入失败状态码 404。媒体资源 http://127.0.0.1:8001/test9.mp4 载入失败。// http://127.0.0.1:8001/test-2.mp4// 当第一段视频加载失败时自动加载下一段视频
事件监听
video srctest.mp4 controls width400 height300 idvideo/videoscriptvar video document.getElementById(video)// 1、loadstart视频查找。当浏览器开始寻找指定的音频/视频时触发也就是当加载过程开始时video.addEventListener(loadstart, function(e) {console.log(提示视频的元数据已加载)console.log(e)console.log(video.duration) // NaN})// 2、durationchange时长变化。当指定的音频/视频的时长数据发生变化时触发加载后时长由 NaN 变为音频/视频的实际时长video.addEventListener(durationchange, function(e) {console.log(提示视频的时长已改变)console.log(e)console.log(video.duration) // 528.981333 视频的实际时长单位秒})// 3、loadedmetadata 元数据加载。当指定的音频/视频的元数据已加载时触发元数据包括时长、尺寸仅视频以及文本轨道video.addEventListener(loadedmetadata, function(e) {console.log(提示视频的元数据已加载)console.log(e)})// 4、loadeddata视频下载监听。当当前帧的数据已加载但没有足够的数据来播放指定音频/视频的下一帧时触发video.addEventListener(loadeddata, function(e) {console.log(提示当前帧的数据是可用的)console.log(e)})// 5、progress浏览器下载监听。当浏览器正在下载指定的音频/视频时触发video.addEventListener(progress, function(e) {console.log(提示视频正在下载中)console.log(e)})// 6、canplay可播放监听。当浏览器能够开始播放指定的音频/视频时触发video.addEventListener(canplay, function(e) {console.log(提示该视频已准备好开始播放)console.log(e)})// 7、canplaythrough可流畅播放。当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发video.addEventListener(canplaythrough, function(e) {console.log(提示视频能够不停顿地一直播放)console.log(e)})// 8、play播放监听video.addEventListener(play, function(e) {console.log(提示该视频正在播放中)console.log(e)})// 9、pause暂停监听video.addEventListener(pause, function(e) {console.log(暂停播放)console.log(e)})// 10、seeking查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发video.addEventListener(seeking, function(e) {console.log(开始移动进度条)console.log(e)})// 11、seeked查找结束。当用户已经移动/跳跃到视频中新的位置时触发video.addEventListener(seeked, function(e) {console.log(进度条已经移动到了新的位置)console.log(e)})// 12、waiting视频加载等待。当视频由于需要缓冲下一帧而停止等待时触发video.addEventListener(waiting, function(e) {console.log(视频加载等待)console.log(e)})// 13、playing当视频在已因缓冲而暂停或停止后已就绪时触发video.addEventListener(playing, function(e) {console.log(playing)console.log(e)})// 14、timeupdate目前的播放位置已更改时播放时间更新video.addEventListener(timeupdate, function(e) {console.log(timeupdate)console.log(e)})// 15、ended播放结束video.addEventListener(ended, function(e) {console.log(视频播放完了)console.log(e)})// 16、error播放错误video.addEventListener(error, function(e) {console.log(视频出错了)console.log(e)})// 17、volumechange当音量更改时video.addEventListener(volumechange, function(e) {console.log(volumechange)console.log(e)})// 18、stalled当浏览器尝试获取媒体数据但数据不可用时video.addEventListener(stalled, function(e) {console.log(stalled)console.log(e)})// 19、ratechange当视频的播放速度已更改时video.addEventListener(ratechange, function(e) {console.log(ratechange)console.log(e)})/script
