自定义基于HTML5的video播放器—Customize your video player

最新推荐文章于 2024-06-13 19:47:20 发布

weixin_34206899

最新推荐文章于 2024-06-13 19:47:20 发布

阅读量697

点赞数

文章标签： javascript ViewUI

HTML5提供有新的video标签，可以不用编程直接播放video，只需要写几行简单的代码，如实现以下效果（带有control panel）

只需要写如下代码：

<body style="background-color:#8EEE5EE;"> 
     <div id="big_wrapper">
        <video src="Introduction.mp4" width="640" height="360" poster= "images/me.jpg" loop controls></video>
        <!--autoplay和poster="images/me.jpg"一般不同时使用，controls是出现控制栏-->
     </div>
</body>

Method

方法method	描述description
addTextTrack()	为音视频加入一个新的文本轨迹
canPlayType()	检查指定的音视频格式是否得到支持
load()	重新加载音视频标签
play()	播放音视频
pause()	暂停播放当前的音视频

properties

属性	描述description
audioTracks	返回可用的音轨列表（MultipleTrackList对象）
autoplay	媒体加载后自动播放
buffered	返回缓冲部件的时间范围(TimeRanges对象)
controller	返回当前的媒体控制器（MediaController对象）
controls	显示播控控件
crossOrigin	CORS设置
currentSrc	返回当前媒体的URL
currentTime	当前播放的时间，单位秒
defaultMuted	缺省是否静音
defaultPlaybackRate	播控的缺省倍速
duration	返回媒体的播放总时长，单位秒
ended	返回当前播放是否结束标志
error	返回当前播放的错误状态
initialTime	返回初始播放的位置
loop	是否循环播放
mediaGroup	当前音视频所属媒体组 (用来链接多个音视频标签)
muted	是否静音
networkState	返回当前网络状态
paused	是否暂停
playbackRate	播放的倍速
played	当前播放部件已经播放的时间范围(TimeRanges对象)
preload	页面加载时是否同时加载音视频
readyState	返回当前的准备状态
seekable	返回当前可跳转部件的时间范围(TimeRanges对象)
seeking	返回用户是否做了跳转操作
src	当前音视频源的URL
startOffsetTime	返回当前的时间偏移(Date对象)
textTracks	返回可用的文本轨迹(TextTrackList对象)
videoTracks	返回可用的视频轨迹(VideoTrackList对象)
volume	音量值

Event

事件event	描述description
abort	当音视频加载被异常终止时产生该事件
canplay	当浏览器可以开始播放该音视频时产生该事件
canplaythrough	当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange	当媒体的总时长改变时产生该事件
emptied	当前播放列表为空时产生该事件
ended	当前播放列表结束时产生该事件
error	当加载媒体发生错误时产生该事件
loadeddata	当加载媒体数据时产生该事件
loadedmetadata	当收到总时长，分辨率和字轨等metadata时产生该事件
loadstart	当开始查找媒体数据时产生该事件
pause	当媒体暂停时产生该事件
play	当媒体播放时产生该事件
playing	当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
progress	当获取到媒体数据时产生该事件
ratechange	当播放倍数改变时产生该事件
seeked	当用户完成跳转时产生该事件
seeking	当用户正执行跳转时操作的时候产生该事件
stalled	当试图获取媒体数据，但数据还不可用时产生该事件
suspend	当获取不到数据时产生该事件
timeupdate	当前播放位置发生改变时产生该事件
volumechange	当前音量发生改变时产生该事件
waiting	当视频因缓冲下一帧而停止时产生该事件

注意：现在HTML5支持的video格式

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

你也可以自己灵活定义video的控制面板，充分利用CSS3的丰富效果。

一点点难看，呵呵！其中页面代码比较简单，如下

<body style="background-color:#8EEE5EE;"> 
     <section id="skin">
        <video id="myMovie" width="640" height="360">
            <source src="videos/Introduction.mp4">
        </video>
        <nav>
            <div id="buttons">
                <button type="button" id="playButton">Play</button>
            </div>
            <div id="defaultBar">
                <div id="progressBar"></div>
            </div>
            <div style="clear:both"></div>
        </nav>
     </section>
</body>

用css控制界面效果

body{
    text-align:center;
}
header,section,footer,aside,nav,article,hgroup{
    display:block;
}
#skin{
    width:700px;
    margin:10px auto;
    padding:5px;
    background:red;
    border:4px solid black;
    border-radius:20px;
}
nav{
    margin:5px 0px;
}
#buttons{
    float:left;
    width:70px;
    height:22px;
}
#defaultBar{
    position:relative;
    float:left;
    width:600px;
    height:14px;
    padding:4px;
    border:1px solid black;
    background:yellow;
}
/*progressBar在defaultBar内部*/
#progressBar{
    position:absolute;
    width:0px;    /*使用javascript控制变化*/
    height:14px;   /*和defaultBar高度相同*/
    background:blue;
}

CSS定的control Panel如上图所示。

接下来就是最主要的javascript代码部分，由四个function构成：

这里用到了HTML5的video的新属性，如.duration,.paused,.ended

function doFisrt()
{
    barSize=600;   //注意不要使用px单位，且不要用var，是全局变量
    myMovie=document.getElementById('myMovie');
    playButton=document.getElementById('playButton');
    bar=document.getElementById('defaultBar');
    progressBar=document.getElementById('progressBar');
    
    playButton.addEventListener('click',playOrPause,false);  //第三个参数总是false, Register the event handler for the bubbling phase.
    bar.addEventListener('click',clickedBar,false);    
}
//控制movie播放和停止
function playOrPause(){
    if(!myMovie.paused && !myMovie.ended){
        myMovie.pause();
        playButton.innerHTML='Play';
        window.clearInterval(updatedBar);
    }else{
        myMovie.play();
        playButton.innerHTML='pause';
        updatedBar=setInterval(update,500);
    }
}
//控制进度条的动态显示
function update(){
    if(!myMovie.ended){
        var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);
        progressBar.style.width=size+'px';
    }else{
        progressBar.style.width='0px';
        playButton.innerHTML='Play';
        window.clearInterval(updatedBar);
    }
}
//鼠标点击进度条控制方法
function clickedBar(e){
    if(!myMovie.paused && !myMovie.ended){
        var mouseX=e.pageX-bar.offsetLeft;
        var newtime=mouseX*myMovie.duration/barSize;  //new starting time
        myMovie.currentTime=newtime;
        progressBar.style.width=mouseX+'px';
        window.clearInterval(updatedBar);
    }
}

window.addEventListener('load',doFisrt,false);

weixin_34206899

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义基于HTML5的video播放器—Customize your video player

HTML5提供有新的video标签，可以不用编程直接播放video，只需要写几行简单的代码，如实现以下效果（带有control panel）只需要写如下代码：&lt;body style="background-color:#8EEE5EE;"&gt; &lt;div id="big_wrapper"&gt; &lt;video src="Intro...
复制链接

扫一扫