音频和视频API一致
方法
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音频/视频添加新的文本轨道 |
| canPlayType() | 检测浏览器是否能播放指定的音频/视频类型 |
| load() | 重新加载音频/视频元素 |
| play() | 开始播放音频/视频 |
| pause() | 暂停当前播放的音频/视频 |
属性
| 属性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音轨的 AudioTrackList 对象 |
| autoplay | 设置或返回是否在加载完成后随即播放音频/视频 |
| buffered | 返回表示音频/视频已缓冲部分的 TimeRanges 对象 |
| controller | 返回表示音频/视频当前媒体控制器的 MediaController 对象 |
| controls | 设置或返回音频/视频是否显示控件（比如播放/暂停等） |
| crossOrigin | 设置或返回音频/视频的 CORS 设置 |
| currentSrc | 返回当前音频/视频的 URL |
| currentTime | 设置或返回音频/视频中的当前播放位置（以秒计） |
| defaultMuted | 设置或返回音频/视频默认是否静音 |
| defaultPlaybackRate | 设置或返回音频/视频的默认播放速度 |
| duration | 返回当前音频/视频的长度（以秒计） |
| ended | 返回音频/视频的播放是否已结束 |
| error | 返回表示音频/视频错误状态的 MediaError 对象 |
| loop | 设置或返回音频/视频是否应在结束时重新播放 |
| mediaGroup | 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素） |
| muted | 设置或返回音频/视频是否静音 |
| networkState | 返回音频/视频的当前网络状态 |
| paused | 设置或返回音频/视频是否暂停 |
| playbackRate | 设置或返回音频/视频播放的速度 |
| played | 返回表示音频/视频已播放部分的 TimeRanges 对象 |
| preload | 设置或返回音频/视频是否应该在页面加载后进行加载 |
| readyState | 返回音频/视频当前的就绪状态 |
| seekable | 返回表示音频/视频可寻址部分的 TimeRanges 对象 |
| seeking | 返回用户是否正在音频/视频中进行查找 |
| src | 设置或返回音频/视频元素的当前来源 |
| startDate | 返回表示当前时间偏移的 Date 对象 |
| textTracks | 返回表示可用文本轨道的 TextTrackList 对象 |
| videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象 |
| volume | 设置或返回音频/视频的音量 |
事件
| 事件 | 描述 |
|---|---|
| abort | 当音频/视频的加载已放弃时 |
| canplay | 当浏览器可以播放音频/视频时 |
| canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时 |
| durationchange | 当音频/视频的时长已更改时 |
| emptied | 当目前的播放列表为空时 |
| ended | 当目前的播放列表已结束时 |
| error | 当在音频/视频加载期间发生错误时 |
| loadeddata | 当浏览器已加载音频/视频的当前帧时 |
| loadedmetadata | 当浏览器已加载音频/视频的元数据时 |
| loadstart | 当浏览器开始查找音频/视频时 |
| pause | 当音频/视频已暂停时 |
| play | 当音频/视频已开始或不再暂停时 |
| playing | 当音频/视频在已因缓冲而暂停或停止后已就绪时 |
| progress | 当浏览器正在下载音频/视频时 |
| ratechange | 当音频/视频的播放速度已更改时 |
| seeked | 当用户已移动/跳跃到音频/视频中的新位置时 |
| seeking | 当用户开始移动/跳跃到音频/视频中的新位置时 |
| stalled | 当浏览器尝试获取媒体数据，但数据不可用时 |
| suspend | 当浏览器刻意不获取媒体数据时 |
| timeupdate | 当目前的播放位置已更改时 |
| volumechange | 当音量已更改时 |
| waiting | 当视频由于需要缓冲下一帧而停止 |
案例:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>视频播放</title> <!--字体图标文件--> <link rel="stylesheet" href="css/font-awesome.css"/> <!--修饰视频播放器样式--> <link rel="stylesheet" href="css/player.css"/> </head> <body> <!--多媒体语义标签--> <figure> <!--多媒体区域的标题解释--> <figcaption>视频播放器</figcaption> <div class="player"> <!--一开始隐藏 加载可以播放就显示--> <video src="./media/fun.mp4"></video> <!--自定义控制栏--> <div class="controls"> <!-- 开始播放按钮 --> <a href="javascript:;" class="switch fa fa-play"></a> <!-- 进度显示区域 --> <div class="progress"> <!--进度显示条--> <div class="line"></div> <!--默认的灰色进度条--> <div class="bar"></div> </div> <!--时间区域--> <div class="timer"> <span class="current">00:00:00</span> / <span class="total">00:00:00</span> </div> <!--全屏按钮 取消全屏按钮--> <a href="javascript:;" class="expand fa fa-arrows-alt"></a> </div> </div> <!--<input type="text" class="dm"><button class="send">发射</button>--> </figure> <script src="js/jquery.min.js"></script> <script> $(function () { //播放器 var $player = $('.player'); var player = $player[0]; //视频jquery元素 var $video = $player.find('video'); //video 元素 api存在它里面 var video = $video[0]; //播放或暂停按钮 var $switch = $('.switch'); //进度条 var $line = $('.line'); //格式化时间 var formatTime = function (time) { //time 40.2s var h = Math.floor(time / 3600); var m = Math.floor(time % 3600 / 60); var s = Math.floor(time % 60); return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s); }; //当前播放时间容器 var $current = $('.current'); //总时长 var $total = $('.total'); //全屏 取消全屏 var $expand = $('.expand'); //获取灰色进度条 var $bar = $('.bar'); /*1.加载的视频可以播放 显示视频标签*/ /*6.在视频加载成功的时候 显示总时长*/ video.oncanplay = function () { //显示视频 $video.show(); //实现总时长 $total.html(formatTime(video.duration)); }; /*2.点击播放按钮 视频进行播放*/ /*3.点击暂停按钮 视频进行暂停*/ $switch.on('click', function () { if ($switch.hasClass('fa-play')) { video.play(); $switch.removeClass('fa-play').addClass('fa-pause'); } else { video.pause(); $switch.addClass('fa-play').removeClass('fa-pause'); } }); /*4.在播放的过程中显示进度条*/ /*4.1 监听当前播放的改变 去计算 当前的播放进度百分比=当前播放时间/视频总时长 当中宽度设置进度条*/ /*5.在播放的过程中显示当前播放时间 00:00:00*/ video.ontimeupdate = function () { //进度显示 var p = video.currentTime / video.duration * 100 + '%'; $line.css('width', p); //播放时间显示 $current.html(formatTime(video.currentTime)); }; /*7.点击全屏操作按钮 播放器全屏*/ /*8.点击取消全屏按钮 播放器取消全屏*/ $expand.on('click', function () { if ($expand.hasClass('fa-arrows-alt')) { player.webkitRequestFullScreen(); $expand.removeClass('fa-arrows-alt').addClass('fa-compress'); } else { document.webkitCancelFullScreen(); //$expand.addClass('fa-arrows-alt').removeClass('fa-compress'); } }); //当你按 esc 退出全屏的时候 没有改按钮 /*document.onkeyup = function(){ 浏览器禁用了全屏状态对esc键的监听 console.log('ok'); }*/ /*去监听是否全屏 如果全屏 */ window.onresize = function () { /*判断是否全屏*/ //注意： if (!document.webkitIsFullScreen) { $expand.addClass('fa-arrows-alt').removeClass('fa-compress'); } }; /*9.点击进度条 根据位置切换当前播放进度*/ /*9.1 获取点击的位置*/ /*9.2 根据位置和进度条的长度比例 计算需 要切换的播放时间*/ /*9.3 设置切换的播放时间为当前播放时间*/ $bar.on('click', function (e) { //获取点击的位置距离元素左侧的距离 var currentTime = e.offsetX / $bar.width() * video.duration; video.currentTime = currentTime; }); /*10. 播放结束 重置一下*/ video.onended = function(){ video.currentTime = 0; $switch.addClass('fa-play').removeClass('fa-pause'); }; }); </script> </body> </html>