zoukankan      html  css  js  c++  java
  • 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) } }
  • 相关阅读:
    C# log4net
    C# compare different Encoding pattern between UTF8 and UTF32 based on Md5
    C# extract img url from web content then download the img
    C# while loop Running until user press key
    C# GZip Compress DeCompress
    C# get md5 from bytes
    transition结合:after,:before实现动画
    http跟https的区别
    window,getComputedStyle,letter-spacing
    inline-block,vertical-align:middle
  • 原文地址:https://www.cnblogs.com/home-/p/11580235.html
Copyright © 2011-2022 走看看