- <!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>