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) } }
  • 相关阅读:
    php集成开发环境搭建三种方式
    阿里云服务器ftp连接后21端口无法使用的问题
    Linux CentOS7 安装FTP服务器
    WIN10分盘
    转载:常见的正则表达式
    转载:什么是分布式系统中的幂等性
    会员通过消费攒积分,升级RENEW以及降级的需求
    CASSANDRA How to import and export data
    tmp for cassandra batch delete
    SQL Insert Case When Update
  • 原文地址:https://www.cnblogs.com/home-/p/11580235.html
Copyright © 2011-2022 走看看