h5 video標簽的使用

 標簽的布置

<video src="1.mp4" poster="1.jpg" id="vid" controls>
　　你的瀏覽器不支持該視頻播放
</video>

 標簽的屬性配置

 autoplay  =>  自動播放

 controls   =>  是否顯示控件

 width       =>  播放器的寬度

 height     =>  播放器的高度

 loop        =>  是否循環播放

 muted     =>  是否靜音播放

 poster     =>  視頻封面

 src          =>   播放源

 preload   =>   頁面加載時進行加載 , 如果有autoplay那么該屬性就會被無視

 

標簽的js接口

play()        =>  播放

pause()    =>   暫停

currentTime  => 當前播放的位置(s)

duration       => 長度(s)

volume        => 音量

muted          => 靜音(boolean)

 

事件

timeupdate  => 根據播放時間變化而觸發的事件

注意:該事件只能用addEventListener來定義

let ovideo = document.getElementById('vid');
ovideo.addEventListener('timeupdate', function () {
       console.log(`當前的時間點是${ovideo.currentTime},視頻長度是${ovideo.duration}`);
}, false)

 

全屏

因為不同瀏覽器之間的兼容性不同,那么全屏的方法也是不一樣的,兼容性寫法如下

let fullScreen = elem => {
    let ele = elem;
    if (document.requestFullscreen) {
    　　ele.requestFullscreen();       //w3c標簽
    } else if (document.mozRequestFullScreen) {
       ele.mozRequestFullScreen();     //FireFox
    } else if (document.webkitRequestFullScreen) {
       ele.webkitRequestFullScreen();  //Chrome等
    } else if (document.msRequestFullscreen) {
       ele.msRequestFullscreen();      //IE11
    }
};

退出全屏

退出全屏的方法也是不一樣的,兼容性寫法如下

let exitFullScreen = elem => {
    let ele = elem;
    if (document.exitFullscreen) {
        ele.exitFullscreen();       //w3c標簽
    } else if (document.mozCancelFullScreen) {
        ele.mozCancelFullScreen();     //FireFox
    } else if (document.webkitCancelFullScreen) {
        ele.webkitCancelFullScreen();  //Chrome等
    } else if (document.msExitFullscreen) {
        ele.msExitFullscreen();      //IE11
    }
};