弹窗播放视频

<div class="video" video-title="播放窗口标题" video-url="/hello.mp4">
<img src="/视频图片.png">
</div>

  <script type="text/javascript" src="/customer/layer/layer.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.video').click(function () {
        var url = $(this).attr('video-url');
        var title = $(this).attr('video-title')
      
        layer.open({
          type: 2,
          title: title,
          maxmin: true,
          area: ['800px', '500px'],
          //直接将视频地址作为内容地址
          // content: url,
          //设置视频宽高，以及不现实下载按钮，有的浏览器使用下面nodownload方式依然会有下载按钮，可以通过css样式进行去除，样式见文后
          content: ' <video style="width:780px;height:480px;" controlsList="nodownload" src="'+url+'" controls></video>',
          end: function () {
            layer.tips('Hi', '#about', {tips: 1})
          }
        });
      });

    });


  </script>

	video::-internal-media-controls-download-button {
		display: none;
	}
	video::-webkit-media-controls {
		overflow: hidden !important;
	}
	video::-webkit-media-controls-enclosure {
		width: calc(100% + 32px);
		margin-left: auto;
	}