index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <link href="video-js-5.20.1/video-js.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="video-js-5.20.1/video.min.js"></script>
  <script>
    videojs.options.flash.swf = "video-js-5.20.1/video-js.swf";
  </script>
  <title>夹娃娃</title>
</head>
<body>
  <!--<div id="id_test_video" style="width:100%; height:auto;"></div>
  <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer.js" charset="utf-8"></script>
  <script>
    var player = new TcPlayer('id_test_video', {
      "m3u8": "http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8", //请替换成实际可用的播放地址
      "autoplay" : true,      //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
      "coverpic" : "http://www.test.com/myimage.jpg",
      "width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
      "height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
    });
  </script>-->
    <video id="example_video_1" class="video-js vjs-default-skin" autoplay preload="auto" style="width: 100vw" height="320" poster="https://digitalsynopsis.com/wp-content/uploads/2016/06/loading-animations-preloader-gifs-ui-ux-effects-5.gif" data-setup="{}">
      <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv">
    </video>


</body>
</html>