operation_web/static/video/video.html at 98fcd15b1a42befd8e14ea75b196b040e868f479

Fork: 0

operation / operation_web

Find file

Newer

Older

operation_web / static / video / video.html

zhangqy on 28 Apr 2020 1 KB 阶段性开发以及修改

Raw Blame History

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>video</title>
  <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"
    type="text/javascript"></script>
  <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
</head>

<body>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    * {
      padding: 0;
      margin: 0;
    }

    .video-js .vjs-tech {
      position: relative !important;
    }

    #myVideo {
      width: 300px !important;
      height: 150px !important;
    }

    /* .video-js {
      width: 300px;
      height: 150px;
    } */

  </style>
  <div>
    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'>
      <source id="source" src="http://132.232.115.20:8300/videoSurveillance/xinzhongxin_main.m3u8"
        type="application/x-mpegURL">
      </source>
    </video>
  </div>
  <!--<div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>-->
</body>

</html>