Html插入视频

写手在作画的夜晚，留下路人惊叹

Html插入视频

 

结构
<div id="Video">
        <input type="button" value="×" class="videoBtn" style="border: none;background: none;letter-spacing: 2px;font-size: 50px;cursor: pointer;">
        <video loop controls preload="auto" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" style="object-fit:fill">
            <source type="video/mp4" src="https://static.lashare.cn:8000/bunnyfitweb/bunnyfitVideo.mp4">
        </video>
        <div class="videoLogo"></div>
    </div>

js:( 包含关闭视频 )
// 播放视频
    $("#Video>.videoImg>img").click(function() {
        $("#Video").css({
            "padding-top": 0,
            "background": "none"
        })
        $("#Video>.videoLogo").hide()
        $("#Video>.videoSize").hide()
        $(this).hide()
        $("video").show()
        $(".videoBtn").show()
        $("video").tigger('play');

    })
// 关闭按钮
    $(".videoBtn").click(function() {
        var video = $("video")[0]
        video.pause()
        $("#Video").css({
            "padding-top": "",
            "background": ""
        })
        $("#Video>.videoLogo").show()
        $("#Video>.videoSize").show()
        $("#Video>.videoImg>img").show()
        $(this).css({

            "display": "block"
        })
        $("video").hide()
        $(".videoBtn").hide()
        $("video").tigger('pause');
    })
// 监听全屏 支持ios和安卓
    function equipment() {
        var u = navigator.userAgent,
            app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
            $("video").addEventListener("x5videoexitfullscreen", function() {
                // ...
            }, false)
        }
        if (isIOS) {
            $("video").addEventListener("ended", function() {
                // ...
            }, false)
        }
    }