位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML5 设计视频播放器

提问人:刘团圆发布时间:2020-11-23

■实例说明

    本例将设计一个视频播放器,会用到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()/};

继续查找其他问题的答案?

相关视频回答
回复(0)

特邀嘉宾

软件开发工程师——刘团圆

软件开发专业科班出身,擅长软件开发课程培训。

向TA咨询

该嘉宾的QQ群

更多>>
返回顶部