点击图片播放视频(弹出层页面全屏播放)

本文由清尘发表于2020-08-27 11:55属于javascript分类
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document2</title>
  <style>
        .play_item{width: 100%; height: 100px; line-height: 100px; text-align: center; border: 1px solid; background-color: #ccc; margin-bottom: 10px;}
        .vodbox{position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: #000; display: flex; align-items: center; justify-items: center; }
        .vod{width: 100%; height: 100%; object-fit: contain; background-color: #000;}
        .vodclose{position: absolute; bottom: 20px; left: 50%;  color: #fff; font-size: 12px; transform: translate3d(-50%,0,0); color: #333; background-color: hsla(0,0%,100%,.8); border-radius: 26px; padding:3px 15px;}
        .vodbox_item{width: 100%; height: 90%; position: absolute; top: 0; border:1px solid #000;}
        .hid{display: none;}
  </style>
</head>
<body>


  <div id="vodbox" class="vodbox hid">
    <div class="vodbox_item">
    </div>
    <div class="vodclose">退出播放</div>

  </div>

  <div id="playbox">
    <div class="play_item" data-src='http://h5player.bytedance.com/video/mp4/xgplayer-demo-360p.mp4'>播放一</div>
    <div class="play_item" data-src='test2.mp4'>播放二</div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script>
    var playVideo = {
      init:function(){
        var vodbox = $('#vodbox'),
            playbox = $('#playbox'),
            _this = this;

        playbox.delegate('.play_item','click',function(){
          var src = $(this).attr('data-src');
          _this.playVod(src);
          vodbox.removeClass('hid')

        })

        vodbox.find('.vodclose').bind('click',function(){
          window.history.go(-1);
        })

        $(window).on("hashchange", function() {
          if("#video" != window.location.hash ){
            vodbox.addClass('hid');
            vodbox.find('.vodbox_item').html('');
            console.log('退出播放')
          }

          });

      },
      playVod:function(vodsrc){
        var vodEle = $('#vodbox').find('.vodbox_item').html('<video class="vod" muted="muted" width="100%" controls="controls" autoplay height="auto" x5-playsinline="" playsinline webkit-playsinline preload="true"><source src="' + vodsrc + '" type="video/mp4">暂时不支持播放该视频</video>');
          vodEle.find('video')[0].play();
          window.location.hash = "#video";
      }
    }

    playVideo.init();

  </script>
</body>
</html>