当前日期时间
当前时间:
网站标志
Logo
全站搜索
广告位
phpweb图片广告
广告位
phpweb图片广告
自定内容

phpweb已经是国内最强的的开源电子商务系统了,但并非完美,因为任何...

互联网3年一轮回,京东凡客等电商品牌在三年之前也不过是小打小闹,而如...

电商已经成为趋势,传统行业的竞争已经逐渐演变到网络上,也有不少用Weboss...

phpweb系统是固定的模式,适用于大部分行业与需求。但有一些行业还是有自己...

当前位置
文章正文

layer视频弹出播放mp4的demo实例

发表:管理员  发表时间:2023-02-22 23:36:59   阅读:(1610)次  

实例需求:

一个视频图片封面,点击触发弹出层,弹出层自动播放mp4视频,点击右上角关闭图层时候自动暂停播放且隐藏弹出层,再次点击图片封面触发显示弹出层,视频再次自动播放。

以下是html:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>这是一个layer视频mp4播放实例Demo</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/layer/3.1.1/theme/default/layer.css">

    <style>

      body {

        font-family: Arial, sans-serif;

        margin: 0;

        padding: 0;

      }

      .video-container {

        position: relative;

        width: 100%;

        height: 0;

        padding-bottom: 56.25%; /* 16:9 aspect ratio */

      }

      .video-cover {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        cursor: pointer;

      }

      .video-cover img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

      }

      .video-wrapper {

        position: relative;

        width: 80vw;

        height: 80vh;

        margin: auto;

        background-color: black;

      }

      .video-wrapper video {

        width: 100%;

        height: 100%;

        object-fit: cover;

      }

      .close-btn {

        position: absolute;

        top: 10px;

        right: 10px;

        color: white;

        font-size: 24px;

        cursor: pointer;

      }

    </style>

  </head>

  <body>

    <div class="video-container">

      <div class="video-cover">

         <img src="https://www.phpweb.com.cn/advance/pics/20191017/1571312000.png" >

      </div>

    </div>

    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/layer/3.1.1/layer.js"></script>

    <script>

      const videoCover = $('.video-cover');


      videoCover.on('click', function() {

        layer.open({

          type: 1,

          title: false,

          closeBtn: 0,

          content: '<div class="video-wrapper"><video controls autoplay><source src="https://demo.weboss.hk/video.mp4" type="video/mp4"></video><span class="close-btn">&times;</span></div>',

          anim: 'scale',

          area: ['80vw', '80vh'],

          success: function(layero, index) {

            const closeBtn = layero.find('.close-btn');

            const videoPlayer = layero.find('video')[0];


            closeBtn.on('click', function() {

              layer.close(index);

              videoPlayer.pause();

            });


            layero.on('click', function(event) {

              if (event.target === layero[0]) {

                layer.close(index);

                videoPlayer.pause();

              }

            });


            layero.on('closed', function() {

              videoPlayer.currentTime = 0;

            });

          }

        });

      });

    </script>

  </body>

</html>


 

假如我们资讯/文章对您有所帮助,您可以通过扫描捐赠二维码支持一下我们~

感谢您对我们的支持,您的小小支持让我们有信心走得更远!

脚注信息
© 2005-2015 草莓互联(100cm.cn) 广州同福信息科技有限公司 版权所有,并保留所有权利。

广州市东莞庄一横路116号 粤ICP备11046216号

经营性网站备案信息 广州网络警察报警平台 不良信息举报中心  百度信誉档案 广州工商红盾网 可信网站认证