HTML5 video常用属性

一、视频video常用标签方法

<!--

            controls           控制条，播放暂停等

            controlslist     控制不允许全屏 不允许下载等

            poster             封面

            autoplay        自动播放

            muted            静音。现在浏览器不支持不静音自动播放

            loop            自动循环播放

            preload            预加载和自动播放不同时使用

         -->

        <video

            src="./img/test.mp4"

            width="" height=""

            controls="controls"

            controlslist="nofullscreen"

            poster="./img/1.jpg"

            autoplay

            muted

            loop

            preload

        ></video>

        <video

            src="./img/test.mp4"

            width="" height=""

            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 = ;

        </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('亚麻蝶');

});