html5 video的視頻播放控制

本文不考慮兼容性，單純的記錄video的簡單用法。分兩個部分，分貝是html角度、js角度和控件

測試視頻地址：http://www.runoob.com/try/demo_source/movie.mp4（來源網絡）

一、從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、開始、暫停、重播、日期顯示