参考链接:
https://www.cnblogs.com/afrog/p/6689179.html
VideoJS的CSS样式，这里我提供一下BootCdn的链接
cdn.bootcss.com/video.js/5.11.2/alt/video-js-cdn.min.css
VideoJS的JS脚本，同上提供BootCdn的链接
cdn.bootcss.com/video.js/5.11.2/alt/video.novtt.min.js
index.html 代码
<head> <link href="//vjs.zencdn.net/7.0.0/video-js.css" rel="stylesheet"> <!-- If you'd like to support IE8 --> <script src="//vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> </head> <body> <BR> <div class="videoplayer"> <div align=center> <video id="my-video" class="video-js" controls preload="none" width="640" height="264" poster="Logo.jpg" data-setup='{ "aspectRatio":"640:267","autoplay": true, "loop": "true","playbackRates": [1, 1.5, 2] }'> <source src="http://192.168.1.80/hls/video.m3u8" type='application/x-mpegURL'> <!-- <source src="MY_VIDEO.webm" type='video/webm'> --> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="//videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video> <script src="//vjs.zencdn.net/7.0.0/video.js"></script> </div> <center> <div class="logo"> <img src="Logo1.png" style="width:25%;"> <img src="Logo2.png" style="width:50%;"> </div> </body>
nginx 的配置如下
server { listen 80; index index.html; root /usr/local/nginx/html/; autoindex on; location /hls { alias /usr/local/nginx/html/hls/; types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } add_header Cache-Control no-cache; add_header Access-Control-Allow-Origin *; } }