html5media 视频

官网: https://html5media.info/

二.引入script

<script src="//api.html5media.info/1.1.8/html5media.min.js"></script>

 

二.HTML

1.IE的低版本不支持百分比格式 width="100%",height="100%"
2.使用图片 poster="/images/Course/detail/video_01.jpg"

<a href="javascript:;" class="video_btn">
    <div class="video_te_sho">
        <video src="http://promotion.chimelong.com/gz_chimelong/happy18.mp4" poster="/images/Course/detail/video_01.jpg" width="645" height="430" controls="controls" preload="auto" id="thevideo"></video>
    </div>
</a>

 

三.js

function detailPage(){
    var video = document.getElementById("thevideo");

    // 判断是否支持vdieo事件
    if(video.canPlayType){
        video.controls = false;
        // 解决IE8无法使用百分比
        $("#thevideo").css({"width":"100%", "height":"100%"})

        // 播放暂停
        function vidplay(evt){
            if(video.paused){
                video.play();
                console.log("暂停");
            }else{
                video.pause();
                console.log("播放");
            }
        }

        // 点击显示视频
        $(".video_btn").on("click", function(){
            if(video.controls === false){
                video.controls = true;
            }
            vidplay();
        })
    }
}