400-700-1307

html5 video的视频播放控制

2019-01-29 16:10

一、从html入手来看

1.1、最简单的video标签

<video src="视频地址">
您的浏览器不支持 video 标签。
</video>

1.2、显示默认控制条

 controls="controls"
<video controls="controls" src="视频地址">
    您的浏览器不支持 video 标签。
</video>

1.3、使用source设置视频地址

<video controls>
<source src="指定MP4格式视频地址" type="video/mp4">
<source src="指定MP4格式视频地址ogg" type="video/ogg">
    ...
    您的浏览器不支持 video 标签。
</video>

1.4、给video设置100%样式

<div style="width:400px;height:540px;background-color:#ccc;">
    <video controls style="width:100%;height:100%;">
    <source src="视频地址" type="video/mp4">
     您的浏览器不支持 video 标签。
    </video>
</div>

通过实践,会发现内部视频区域不会铺满(如下图),可以通过设置video的css object-fit: fill

<div style="width:400px;height:540px;background-color:#ccc;">
    <video controls style="width:100%;height:100%;object-fit: fill">
    <source src="视频地址" type="video/mp4">
     您的浏览器不支持 video 标签。
    </video>
</div>

1.5、自动播放autoplay

在视频装载完成自动播放

<video src="视频地址" autoplay>
    您的浏览器不支持 video 标签。
</video>

1.6、循环播放loop

<video src="视频地址" autoplay loop>
    您的浏览器不支持 video 标签。
</video>

1.7、静音播放muted

<video src="视频地址" autoplay muted>
    您的浏览器不支持 video 标签。
</video>

1.8、预加载视频preload

预加载指的是视频没有播放,但提前进行加载。如果视频已经播放了,那预加载也就无用了。

<video src="视频地址" preload>
    您的浏览器不支持 video 标签。
</video>

 

二、js对video的操作

2.1、操作对象是谁

指定的video对象,dom(本节以下内容统一用video表示对象)

2.2、播放视频

video.play();

2.3、暂停视频

video.pause();

 2.4、监听视频播放时间

video.addEventListener("timeupdate",function(){
    this.currentTime//当前时间(单位是秒)
    Math.floor(this.duration);//转换成整数
},false);

2.5、获取视频总时长

获取视频时长是有可能延迟的

let timer = setInterval(function () {
    if(video.duration){
        Math.floor(video.duration);//单位是秒
        clearInterval(timer);
    }
},1000);

2.6、控制音量大小volume

2.7、控制音量大小volume

(赋值0-1)

2.8、全屏

进入video.requestFullscreen();

退出 document.exitFullscreen();

三、常用控件

3.1、自定义播放进度

3.2、开始、暂停、重播、日期显示

开班信息

当前校区

北京校区
  • 北京校区
  • 上海校区
  • 广州校区
  • 沈阳校区
  • 杭州校区
  • 南京校区
  • 郑州校区
  • 成都校区
  • 深圳校区
  • 西安校区
  • 苏州校区
  • 深圳沙井
  • 深圳观澜
  • 深圳龙岗
  • 武汉校区
  • 西宁校区
  • 石家庄校区
  • 湖北咸宁
  • 广东惠州
  • 广东佛山

                    Copyright © 2007-2019 IT兄弟连教育 版权所有 京ICP备11018177号  京公网安备 11010802026987号