HTML5-video相关属性和方法（附案例）

最新推荐文章于 2025-06-23 13:40:40 发布

原创最新推荐文章于 2025-06-23 13:40:40 发布 · 4.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#video #视频播放器 #HTML5

HTML 专栏收录该内容

6 篇文章

订阅专栏

video是H5中新增的多媒体标签，video附有很多的属性和方法，还有一些常用事件，今天就给大家介绍一下这些用法，后文附有一个多媒体播放器的案例。

1.常用方法

load():加载视频
paly():播放视频
pause():暂停视频

2.常用属性

currentTime:视频播放的当前进度（可读可写）
duration:视频的总时间（以秒计算）
paused:视频播放的状态（如果正在播放，则返回true）

注意：jQuery没有提供对这些方法和属性的操作方式，所以这些方法和属性必须通过原生js对象去获取！

3.常用事件

oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
ontimeupdate:通过该事件来报告当前的播放进度，只要视频在播放，这个事件会持续触发
onended:播放完时触发

视频播放器案例：

注：此案例是一个自制的视频播放器，综合运用了上述的属性方法和事件，它解决了video标签在不同内核的浏览器中打开显示的样式不一样的问题。案例中引用了自写的css文件和font-awesome字体的css文件，如果有什么疑问，可以在下方留言，看到之后会回复。

先上图：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/css.css">
</head>
<body>
<h3 class="playerTitle">视频播放器</h3>
<div class="player">
    <video src="../mp4/chrome.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="bar"></div>
            <div class="loaded"></div>
            <div class="elapse"></div>
        </div>
        <div class="time">
            <span class="currentTime">00:00:00</span>
            \
            <span class="totalTime">00:00:00</span>
        </div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script>
    /*通过jq来实现功能*/
    $(function(){
        /*1.获取播放器*/
        var video=$("video")[0];

        /*2.实现播放与暂停*/
        $(".switch").click(function(){
            /*实现播放与暂停的切换：如果是暂停>>播放  ，如果是播放 >> 暂停*/
            if(video.paused){
                video.play();
                /*移除暂停样式，添加播放样式*/
            }
            else{
                video.pause();
                /*移除播放样式，添加暂停样式*/
            }
            /*设置标签的样式  fa-pause:暂停   fa-play：播放*/
            $(this).toggleClass("fa-play fa-pause");
        });

        /*3.实现全屏操作*/
        $(".expand").click(function(){
            /*全屏>>不同浏览器需要添加不同的前缀>>能力测试*/
            if(video.requestFullScreen){
                video.requestFullScreen();
            }
            else if(video.webkitRequestFullScreen){
                video.webkitRequestFullScreen();
            }
            else if(video.mozRequestFullScreen){
                video.mozRequestFullScreen();
            }
            else if(video.msRequestFullScreen){
                video.msRequestFullScreen();
            }
        });

        /*4.实现播放业务逻辑：当视频文件可以播放时触发下面的事件*/
        video.oncanplay=function(){
            setTimeout(function(){
                /*1.将视频文件设置为显示*/
                video.style.display="block";
                /*2.获取当前视频文件的总时长(以秒做为单位，同时获取了小数值)，计算出时分秒*/
                var total=video.duration;

                var result=getResult(total);
                /*4.将计算结果展示在指定的dom元素中*/
                $(".totalTime").html(result);
            },2000);
        }

        /*通过总时长计算出时分秒*/
        function getResult(time){
            var hour=Math.floor(time/3600);
            /*补0操作*/
            hour=hour<10?"0"+hour:hour;
            var minute=Math.floor(time%3600/60);
            minute=minute<10?"0"+minute:minute;
            var second=Math.floor(time%60);
            second=second<10?"0"+second:second;
            /*返回结果*/
            return hour+":"+minute+":"+second;
        }

        /*5.实现播放过程中的业务逻辑，当视频播放时会触发ontimeupdate事件
        * 如果修改currentTime值也会触发这个事件，说白了，只要currenTime值变化，就会触发这个事件*/
        video.ontimeupdate=function(){
            /*1.获取当前的播放时间*/
            var current=video.currentTime;
            /*2.计算出时分秒*/
            var result=getResult(current);
            /*3.将结果展示在指定的dom元素中*/
            $(".currentTime").html(result);
            /*4.设置当前播放进度条样式  0.12>>0.12*100=12+%>12%*/
            var percent=current/video.duration*100+"%";
            $(".elapse").css("width",percent);
        }

        /*6.实现视频的跳播*/
        $(".bar").click(function(e){
            /*1.获取当前鼠标相对于父元素的left值--偏移值*/
            var offset= e.offsetX;
            /*2.计算偏移值相对总父元素总宽度的比例*/
            var percent=offset/$(this).width();
            /*3.计算这个位置对应的视频进度值*/
            var current=percent*video.duration;
            /*4.设置当前视频的currentTime*/
            video.currentTime=current;
        });

        /*7.播放完毕之后，重置播放器的状态*/
        video.onended=function(){
            video.currentTime=0;
            $(".switch").removeClass("fa-pause").addClass("fa-play");
        }
    });
</script>
</body>
</html>