h5 video方法,事件,属性详解
h5 video方法,事件,属性详解
1.video属性
<!-- video 不支持 IE8及以下版本浏览器,支持三种视频格式:MP4,WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" controls controlslist="nodownload" width="400" height="300"></video> <!-- 禁止下载,禁止全屏 --> <video src="test.mp4" controls controlslist="nodownload nofullscreen" width="400" height="300"></video> <!-- 自动播放 (不同浏览器的表现不一样) --> <video src="test.mp4" controls autoplay width="400" height="300"></video> <!-- 默认静音播放(可手动点开继续播放) --> <video src="test.mp4" controls muted width="400" height="300"></video> <!-- 循环播放 --> <video src="test.mp4" controls loop width="400" height="300"></video> <!-- 预加载 --> <video src="test.mp4" controls preload width="400" height="300"></video> <!-- 贴图 --> <video src="test.mp4" poster="poster.jpg" controls width="400" height="300"></video> <!-- 音量控制 --> <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video> <script> var video = document.getElementById('_volume') video.volume = 2 // 取值范围:0 到 1,0 是静音,0.5 是一半的音量,1 是最大音量(默认值) </script> <!-- 播放时间控制 --> <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_time"></video> <script> var video = document.getElementById('_time') console.log(video.currentTime) // 视频当前正在播放的时间(单位:s),进度条拖到哪就显示当前的时间 video.currentTime = 60 // 默认从60秒处开始播放 </script> <!-- 播放地址切换 (常见于切换超清 高清 流畅,不同画质的视频地址不同) --> <video src="test.mp4" controls autoplay width="400" height="300" id="_src"></video> <script> var video = document.getElementById('_src') console.log(video.src) // http://127.0.0.1:8001/test.mp4 绝对地址,DOM 中是相对地址 // video.src = 'test-2.mp4' // 直接替换掉了原来的视频src setTimeout(() => { video.src = 'test-2.mp4' // 播放到第 30s 的时候,自动切换视频 }, 30000) </script> <!-- 备用地址切换 --> <video controls autoplay width="400" height="300" id="_source"> <source src="test3.mp4" type="video/mp4" /> <source src="test9.mp4" type="video/mp4" /> <source src="test-2.mp4" type="video/mp4" /> </video> <script> var 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 // 当第一段视频加载失败时,自动加载下一段视频
2.video 事件
<script> var 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>
3.基本示例
<video id="video" style="object-fit:fill" autoplay webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" src="video.mp4" /> </video> <!-- object-fit: fill 视频内容充满整个video容器 poster:"img.jpg" 视频封面 autoplay: 自动播放 auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频 muted:当设置该属性后,它规定视频的音频输出应该被静音 webkit-playsinline playsinline: 内联播放 x5-video-player-type="h5" : 启用x5内核H5播放器(移动端隐藏播放控件) x5-video-player-fullscreen="true" 全屏设置。ture和false的设置会导致布局上的不一样 x5-video-orientation="portraint" :声明播放器支持的方向,可选值landscape 横屏,portraint竖屏。 默认值portraint。无论是直播还是全屏H5一般都是竖屏播放, 但是这个属性需要x5-video-player-type开启H5模式 -->
.监控下载进度
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/ / 视频时长 var duration = video.duration / / 获取视频已经下载的时长 function getEnd(video) { var end = 0 try { end = video.buffered.end( 0 ) || 0 end = parseInt(end * 1000 + 1 ) / 1000 } catch(e) { } return end } |
移动端填坑
<video id="video" style="object-fit:fill" autoplay webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" src="video.mp4" /> </video> <!-- object-fit: fill 视频内容充满整个video容器 poster:"img.jpg" 视频封面 autoplay: 自动播放 auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频 muted:当设置该属性后,它规定视频的音频输出应该被静音 webkit-playsinline playsinline: 内联播放 x5-video-player-type="h5" : 启用x5内核H5播放器 x5-video-player-fullscreen="true" 全屏设置。ture和false的设置会导致布局上的不一样 x5-video-orientation="portraint" :声明播放器支持的方向,可选值landscape 横屏,portraint竖屏。 默认值portraint。无论是直播还是全屏H5一般都是竖屏播放, 但是这个属性需要x5-video-player-type开启H5模式 -->
自动播放
-
设置autoplay属性
-
<video autoplay></video>
-
移动浏览器中
但是在很多移动浏览器里,都是要求用户的真实操作来(touchend、click、doubleclick 或 keydown 事件等标准的事件)触发调用video.play()
,才能自动播放影音视频。
dom.addEventListener('click', function () { video.play() })
-
微信中
也可以在 wx.ready()
里触发video.play()
1
2
3
|
wx.ready(function () { video.play() }) |
内联播放
-
设置属性
webkit-playsinline playsinline
-
1
<video
id
=
"video"
webkit
-
playsinline playsinline
/
><
/
video>
在iOS Safari和一些安卓的一些浏览器下播放视频的时候,不能在h5页面中播放视频,系统会自动接管视频
如果需要在h5页面内播放视频,需要在视频标签上加上 webkit-playsinline
,在iOS10以后,需要加上playsinline
,建议同时加上这两个属性。同时还需要app支持这种模式
1
|
webview.allowsInlineMediaPlayback = YES; |
ios手Q和微信都支持这种模式,但是android 微信就挂了
-
android 微信
android微信内置浏览器采用腾讯X5内核,不遵循X5web标准,video强制全屏就是其一。视频播放完毕后还会出现QQ自己的视频推荐
据说,其有个白名单,白名单下的视频资源,就不会全屏。但是腾讯已经不能再增加白名单了。尿性,无解。。。。。。
目前还有一个解决办法,就是使用h5 canvas
播放 video
-
canvas 播放视频
使用canvas 遇到的坑:video
必须加 x5-video-player-type="h5"
属性,否则,在移动端就会卡死不能播放视频,个人认为是因为视频被接管的原因导致。
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
|
<div class = "wrapper" > <video id = "video" style = "display: none" autoplay src = "video.mp4" x5 - video - player - type = "h5" >< / video> <canvas id = "canvas" >< / canvas> < / div> <script> var video = document.querySelector( '#video' ) var canvas = document.querySelector( '#canvas' ) var wrapper = canvas.parentNode var width = wrapper.offsetWidth var height = wrapper.offsetHeight var ctx = c.getContext( '2d' ) var time = null canvas.width = width canvas.height = height canvas.addEventListener( 'click' , function () { video.play() }) video.addEventListener( 'play' , function () { time = window.setInterval(function () { ctx.drawImage(v, 0 , 0 , width, height); }, 20 ); }, false); video.addEventListener( 'pause' , function () { window.clearInterval(time); }, false); video.addEventListener( 'ended' , function () { window.clearInterval(time); }, false); < / script> |
最后发现,虽然使用canvas
播放视频,android微信中可以屏蔽全屏视频播放完的推荐视频。但是还没办法禁止视频播放时 的全屏问题。还是得万恶的白名单。吐槽。。。。。。。。。。。。。。。。
更坑爹的是没有找到js触发退出全屏的方法。
ios黑屏问题
ios 在播放视频时,会出现短暂的黑屏,然后正常显示。
解决方法:
在视频上层覆盖一个 添加一个div
并用一张图片填充,制造播放前加载假象。然后监听事件 timeupdate ,视频播放有画面时移除这个“div块”
video.addEventListener('timeupdate', function(){
if(video.currentTime > 0.1){
posterImg.hidden();
}
})
Media 方法和属性
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement
// 媒体错误
MediaObj.error; //null:正常
MediaObj.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//媒体当前状态
MediaObj.currentSrc; //返回当前资源的URL
MediaObj.src = value; //返回或设置当前资源的URL
MediaObj.canPlayType(type); //是否能播放某种格式的资源
MediaObj.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
MediaObj.load(); //重新加载src指定的资源
MediaObj.buffered; //返回已缓冲区域,TimeRanges
MediaObj.preload; //none:不预载 metadata:预载资源信息 auto:
//准备状态
MediaObj.readyState;//1:HAVE_NOTHING
//2:HAVE_METADATA
//3.HAVE_CURRENT_DATA
//4.HAVE_FUTURE_DATA
//5.HAVE_ENOUGH_DATA
MediaObj.seeking; //是否正在seeking
//回放状态
MediaObj.currentTime = value; //当前播放的位置,赋值可改变位置
MediaObj.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
MediaObj.duration; //当前资源长度 流返回无限
MediaObj.paused; //是否暂停
MediaObj.defaultPlaybackRate = value;//默认的回放速度,可以设置
MediaObj.playbackRate = value;//当前播放速度,设置后马上改变
MediaObj.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
MediaObj.seekable; //返回可以seek的区域 TimeRanges
MediaObj.ended; //是否结束
MediaObj.autoPlay; //是否自动播放
MediaObj.loop; //是否循环播放
MediaObj.play(); //播放
MediaObj.pause(); //暂停
//视频控制
MediaObj.controls;//是否有默认控制条
MediaObj.volume = value; //音量
MediaObj.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"); //音量改变
移动端 HTML5 <video> 视频播放优化实践
一些常用且需要重点关注的<video>事件
event | iOS | Android |
---|---|---|
play | 只是要播放视频,响应的是video.play()方法,并不代表已经开始播放 | 和iOS一样,仅是响应video.play()方法 |
durationchange | 会执行一次,一定会获取到视频的duration | 可能会执行多次,只有最后一次才能获取到真实的duration,前面的duration都是0;但低版本Android可能获取到的duration是0或1;(本文提到的低版本Android大部分是4.1以下) |
canplay | 可以认为是视频元素没有问题,可以运行,没有更多含义了,基本用不上 | 同iOS |
canplaythrough | 会有明确的缓冲,表示可以流畅播放了; | 没有什么用,视频仍然会卡住,数据可能还没有开始加载; |
playing | 明确表示播放开始了; | 依然没有用,视频可能并没有开始播放; |
progress | 有明确的下载,可以获取到当前的buffer,并且全部下载完毕后不在触发; | 不一定有明确的数据下载,并且全部下载完毕后依然继续触发; |
timeupdate | 会有明确的进度变化,可以获取到currentTime; | 进度不一定变化,currentTime可能总是0,但是第一次有currentTime变化的timeupdate事件一定代表了视频开始播放了; |
error | iOS中会有明确的错误抛出; | Android中某些浏览器会莫名其妙的抛出error; |
stalled | 网络状况不佳,导致视频下载中断; | 在没有play之前,也可能会抛出该事件。 |
属性差异
attributes | iOS | android |
---|---|---|
poster 封面图片 |
支持,但是加载速度明显比在<img>中要慢; | 不一定支持(浏览器厂商的实现标准不统一); |
preload 预加载 |
iPhone不支持; | 可能支持; |
autoplay 自动播放 |
iPhone Safari中不支持,但在webview中可能被开启;iOS开发文档明确说明蜂窝网络下不允许autoplay; | 可能支持; |
loop 循环播放 |
支持 | 可能支持; |
controls 控制条 |
支持,但是需要开始播放了才显示 | 基本都支持显示或者不显示 |
width和height | 一定给出明确的属性设置,切不能为0; | 如果不设置,仅仅通过CSS样式去控制视频大小,可能会导致 |
其他怪异bug和不友好表现
iOS | android |
---|---|
物理位置覆盖在<video>区域上的元素,click和touch等事件会失效,比如一个<a>链接如果覆盖在<video>上,那么点击后没有任何效果。 | - |
iOS8.0+中,单页面播放视频超过16个,再播放的视频全部MediaError解码异常无法播放。 | - |
iPhone的Safari会弹出一个全屏的播放器来播放视频,iPad则支持内联播放。iOS7+ 如果webview(比如微信)开启了webview.allowsInlineMediaPlayback = YES; ,可以通过设置webkit-playsinline 属性支持内联播放; |
支持内联播放,但某些厂商会用自己的播放器劫持原生的视频播放; |
下载视频时,会先发送一个2字节的请求来获取视频元数据(比如时长),然后再不断的发送分包续传(206)请求来下载视频,抓包显示请求数和请求量至少有一倍的冗余(x2),这个严重的bug在iOS8中有明显的修复,但是分包的206请求仍然会有冗余数据的下载,浪费了流量。 | 比iOS的处理方式好,没有第一个2字节请求,没有流量损耗; |
- | 低版本Android(<=4.0.4)中,<video>如果在有相对和决定定位的层中,可能会导致整个页面错位。 |
- | 某些浏览器厂商会劫持<video>,用其“自己”的播放器来播放视频,“破坏”了产品本身的播放体验,那么只能case by case的解决了。 |
加载视频时没有进度提示,视觉上看不出是播放完了还是卡住了; | 加载视频时,大都会显示一个自带的loading UI(菊花)。 |
最佳实践
视频初始化
如果将一个<video>直接显示在页面中,那么就会看到各种五花八门的播放器初始效果;
这显然不是一个好的视觉体验,那么通常的做法是制作一个模拟的视频播放视图,比如一个封面加一个播放按钮。
而真实的<video>视频元素要隐藏起来,如何隐藏呢?最好不要用{display: none}
或者{width:0;height:0;}
的方式,因为这样视频元素会处于未激活的状态,给后续的处理带来麻烦。最佳的方式是将视频设置成1x1像素大小,放在视觉边缘的位置。
<!--iOS-->
<video webkit-playsinline width="1" height="1" class="vplayinside notaplink" x-webkit-airplay controls loop="loop" src="<%=src%>"></video>
<!--Android-->
<video width="1" height="1" controls loop="loop" src="<%=src%>"></video>
自动播放
autoplay的支持依赖内核和网络状况,比如iPhone在蜂窝网络下明确禁用了autoplay;
经过试验,在没有明确的用户操作的情况下,直接通过video.play()
也是无法激活播放的;
并且在产品设计上,自动播放也不是一个舒服的用户体验,所以产品设计上尽量避免使用自动播放。
点击播放
之前提到,视频最好通过1px大小隐藏起来,那么这时如何触发播放呢?
经过试验,当在明确的用户操作(touch、click)时,通过这些用户行为事件的回调函数,用video.play()
是可以触发视频播放的,那么能否在用户操作后,再去同步的创建和播放视频呢?答案是肯定的,这无疑是一个视频元素初始化的最佳实践,但是有些差异需要注意。
iOS6+
可以在用户的touch时间中动态创建并播放视频。
iOS < 6
可以在用户的touch时间中动态创建视频,但不能播放;要再追加一个click事件来启动播放;也就是说,给伪造的视频播放按钮同时绑定tap和click事件,在tap的时候创建,在之后300毫秒的click中去播放。
Android
大部分高版本Android可以像iOS6+那样去处理,但是低版本的不行,必须要通过click事件去传递video.play()
,为了保持兼容,最好是用帮tap和click两个事件来分别完成视频的初始化和播放。
我们还发现,有些低版本Android中,无法通过video.play()
来播放视频,必须有真实的用户点击视频元素才能播放;这种情况,有一个技巧就是在tap的时候初始化并放大视频覆盖在播放视图中,让300毫秒后的真实点击行为穿透点击在视频元素上来实现播放。
循环播放
如果视频需要循环播放,那么就增加loop
属性,是否能循环播放就看浏览器是否支持了,因为还没有找到hack技巧来强制循环播放;
即使,在不支持循环播放的Android中,通过监听seeked
事件知道了播放进度到了终点或起点暂停了,此时也无法通过video.play()
来让视频重新播放。
监控下载进度
如何获取视频时长和已经下载的时长?
// 视频时长
var duration = video.duration
// 获取视频已经下载的时长
function getEnd(video) {
var end = 0
try {
end = video.buffered.end(0) || 0
end = parseInt(end * 1000 + 1) / 1000
} catch(e) {
}
return end
}
progress事件表示视频在加载,但是它的触发频率和时机并不规律,最佳做法是通过一个定时器去实时获取end,当end >= duration时,表示已经下载完毕,再终止定时器。
一款全兼容的播放器 videojs
[官网]http://www.videojs.com/
videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本。
最新的版本
下载-5.8.0-releases版本
目录结构
video.js/
├── alt
│ ├── video.novtt.js
│ ├── video.novtt.min.js
│ └── video.novtt.min.js.map
├── examples/
├── font
│ ├── VideoJS.eot
│ ├── VideoJS.svg
│ ├── VideoJS.ttf
│ └── VideoJS.woff
├── ie8
│ ├── videojs-ie8.js
│ └── videojs-ie8.min.js
├── lang/
├── video-js-5.8.0.zip
├── video-js.css
├── video-js.min.css
├── video-js.swf
├── video.js
├── video.js.map
├── video.min.js
└── video.min.js.map
引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站
<link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>
<script src=”http://vjs.zencdn.net/c/video.js”></script>
1
2
如果需要支持IE8,这个js可以自动生成flash
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
1
2
页面中加入一个html5的video标签
<video id="my_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264" poster="my_video_poster.png" data-setup="{}">
<source src="my_video.mp4" type="video/mp4">
<source src="my_video.webm" type="video/webm">
</video>
其中post就是视频的缩略图,那俩source一个指向mp4视频,一个指向webm视频,在页面加载过程中,video.js会判断浏览器支持哪个格式视频,会自动加载可播放的视频。
简单吧!
进阶:使用api
获取对象:
后面那个就是就是video标签的id值,这是myPlayer就是播放器对象了。
videojs("my-video").ready(function(){
window.myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
方法:
获取对象
var videoObj = videojs(“videoId”);
ready:
myPlayer.ready(function(){
//在回调函数中,this代表当前播放器,
//可以调用方法,也可以绑定事件。
})
播放:
myPlayer.play();
暂停:
myPlayer.pause();
获取播放进度:
var whereYouAt = myPlayer.currentTime();
设置播放进度:
myPlayer.currentTime(120);
视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效
var howLongIsThis = myPlayer.duration();
缓冲,就是返回下载了多少
var whatHasBeenBuffered = myPlayer.buffered();
百分比的缓冲
var howMuchIsDownloaded = myPlayer.bufferedPercent();
声音大小(0-1之间)
var howLoudIsIt = myPlayer.volume();
设置声音大小
myPlayer.volume(0.5);
取得视频的宽度
var howWideIsIt = myPlayer.width();
设置宽度:
myPlayer.width(640);
获取高度
var howTallIsIt = myPlayer.height();
设置高度:
myPlayer.height(480);
一步到位的设置大小:
myPlayer.size(640,480);
全屏
myPlayer.enterFullScreen();
离开全屏
myPlayer.enterFullScreen();
添加事件
durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
var myFunc = function(){
// Do something when the event is fired
};
事件绑定
myPlayer.on("ended", function(){
console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
console.log("pause")
});
删除事件
myPlayer.removeEvent(“eventName”, myFunc);
1
虽然文章说明在不支持html5的情况下,会以flash播放,但在支持html5的firefox下播放mp4时,却遇到很大的困难,虽然调用了flash,但一直无法播放(不过我也一直怀疑我的firefox下的flash有问题,不知道是不是真的)。不过如果你听从videojs的建议,放两个格式的视频,就不会有这个问题了。
另外video的写法中还有专门针对flash的写法,当然你也可以用这个插件实现纯粹的flash播放(只写flash那部分就好,可以保证统一的浏览效果,不过ios的浏览器不兼容flash,这就要你自己进行判断来处理
一个播放器demo
————————————————
版权声明:本文为CSDN博主「ly115176236」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ly115176236/article/details/50977127
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
2022-02-17 视区相关单位vw, vh..简介以及可实际应用场景
2022-02-17 如何让弹窗高度随着浏览器的高度走
2022-02-17 html文件上传控件file自定义样式
2022-02-17 使用includes
2022-02-17 前端必备基础知识:window.location 详解
2022-02-17 在灰度时调用不同的promise服务
2022-02-17 流媒体服务器