HTML5 video常用属性

一、视频video常用标签方法

<!-- 
            controls           控制条，播放暂停等
            controlslist     控制不允许全屏 不允许下载等
            poster             封面
            autoplay        自动播放
            muted            静音。现在浏览器不支持不静音自动播放
            loop            自动循环播放
            preload            预加载和自动播放不同时使用
         -->
        <video 
            src="./img/test.mp4"
            width="400" height="300" 
            controls="controls" 
            controlslist="nofullscreen"
            poster="./img/1.jpg" 
            autoplay
            muted
            loop
            preload
        ></video>

        <video 
            src="./img/test.mp4"
            width="400" height="300" 
            controls="controls" 
            poster="./img/1.jpg" 
            id="videoPlay"
        ></video>
        <script>
            /**
            *  volume        通过volume控制视频的初始音量支持 0-1，但是必须通过js控制
            *  currentTime    视频的当前时间位置  单位默认为s
            *  video.src     视频的地址。可以切换视频的地址。
            */
            var video = document.getElementById('videoPlay');
            video.volume = 0.5;
            video.currentTime = 60;
        </script>

二、视频video常用方法

(a)：判断视频是否能够播放了。这个是能播放，视频有一帧就能播放了

<div class="media">
    <video autoplay="" loop="" id="videos">
        <source src="http://stg.shinetech.likvm.com/sites/stg/files/video/Shinetech-Final_Compress.ogv">
        <source src="http://stg.shinetech.likvm.com/sites/stg/files/video/Shinetech-Final_Compress.MP4">
        Your browser does not support the Video tag.
    </video>
</div>

方法

var isVideoIsDone = false;
var vedioElem = document.getElementById("videos");
vedioElem.addEventListener("canplay", function () {
     isVideoIsDone = true;
});

(b)：判断视频如何能流畅播放。 

var isVideoIsDone = false;
var vedioElem = document.getElementById("videos");
vedioElem.addEventListener("canplaythrough", function () {
     isVideoIsDone = true;
});

(c)：如何判断视屏已经播放完毕

var AV = document.getElementById('tokyohot') || null;

AV.addEventListener('ended',function(){
  //do something
  alert('亚麻蝶');
});