HTML5 设计视频播放器

■实例说明

    本例将设计一个视频播放器，会用到HTML5提供的video元素，以及HTML5提供的多媒体API的扩展，示例演示效果如图所示。

使用JavaScript控制播放控件的行为（自定义播放控件），实现如下功能。

    利用HTML+CSS制作一个自己的播放控件条，然后定位到视频最下方。

    视频加载loading效果。

    播放、暂停。

    总时长和当前播放时长显示。

    播放进度条。

   全屏显示。

■设计过程 

第1步，设计播放控件。

<figure>

    <figcaption〉视频播放器 </figcaption〉

    <div class="player">

        <video src="./video/mv.mp4"></video>

        <div class="controls"）

            <!--播放/暂停-->

            <a href="javascript:;" class="switch fa fa-play"></a>

            <!—全屏一>

            <a href="javascript:;" class="expand fa fa-expand"></a>

            <!--进度条-->

            <div class="progress">

                <div class="loaded"></div>

                <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>

            <!--声音-->

        </div>

    </div>

</figure>

上面是全部HTML代码，controls类就是播放控件HTML，引用CSS外部样式表。

<link rel="stylesheet" href="css/font-awesome.css"> 

<link rel=nstylesheet" href="css/player.css" >

为了显示播放按钮等图标，本例使用了字体图标。

第2步，设计视频加载loading效果。先隐藏视频，用一个背景图片替代，等视频加载完毕之后，再显示并播放视频。

.player {

    width:720px;height:360px;margin:0 auto;position:relative; 

    background:#000 url(images/loading.gif) center/300px no-repeat;

}

video {display:none/margin:0 auto;height:100%;}

第3步，设计播放功能。在JavaScript脚本中，先获取要用到的DOM元素。

var video = document.querySelector("video");

var isPlay = document.querySelector(".switch");

var expand = document. querySelector(".expand1"）;

var progress = document. querySelector(".progress"〉;

var loaded = document.querySelector(".progress > .loaded"）;

var currPlayTime = document.querySelector(".timer > .current"〉;

var totalTime = document.querySelector (".timer > .total");

当视频可以播放时，显示视频。

video.oncanplay = function (){//当视频可播放的时候

    this.style.display = "block"; //显示视频

    totalTime.innerHTML = getFormatTime (this.duration) ; //显示视频总时长

}；

第4步，设计播放、暂停按钮。当点击播放按钮时，显示暂停图标，在播放和暂停状态之间切换图标。

isPlay .onclick = function (){//播放按钮控制

    if(video.paused) {

        video.play();

    } else {

    video.pause ();

    }

    this.classList.toggle("fa-pause");

}；

第5步，获取并显示总时长和当前播放时长。前面代码中其实己经设置了相关代码，此时只需要把获取到的毫秒数转换成需要的时间格式即可。先定义getFormatTimeO函数，用于转换时间格式。

function getFormatTime(time) {

    var time = time 0;

    var h = parselnt(time/3600),

        m = parselnt(time%3600/60),

        s = parselnt(time%60);

   h = h <10 ? n0n+h : h;

   m = m <10 ? n0n+m •• m;

   s = s <10 ? "0M+s : s;

   return h+":"+m+n:"+s;

}

第6步，设计播放进度条。

video.ontimeupdate = function(){

    var currTime = this.currentTime,                    //当前播放时间

    duration = this.duration;                           //视频总时长

    var pre = currTime/duration * 100 + "%";            //百分比

    loaded.style.width = pre;                           //显示进度条

    currPlayTime. innerHTML = getFormatTime (currTime); //显示当前播放进度时间

};

    这样就可以实时显示进度条了，此时，还需要点击进度条进行跳跃播放，即点击任意时间点视频跳转到当前时间点播放：

    progress .onclick = function (e) {//跳跃播放 

        var event = e window.event;

        video.currentTime = (event.offsetX/this.offsetWidth) * video.duration;

}；

第7步，设计全屏显示。这个功能使用HTML5提供的全局API: webkitRequestFullScreen实现，与video元素无关，经测试在Firefox、IE下全屏功能不可用，仅针对webkit内核浏览器可用。

//全屏

expand.onclick = function () {video.webkitRequestFullScreen()/};