js播放.m3u8格式-直播流

由于这次项目需要展示监控的实时画面，对视频这一块也没做过多的了解，这是实现了相关的功能。代码如下

首先需要引入一个css和js

<link href="//vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">

<script src="//vjs.zencdn.net/5.19/video.min.js"></script>
<script src="static/js/homepage/videojs-contrib-hls.min.js"></script>

这是在请求的时候写入的js

<video id="myVideo" width='500' height="250" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"  data-setup='{}'>    
      <source id="source" src="${url}"  type="application/x-mpegURL">
</video>

vjs-big-play-centered 表示播放按钮在中间
data-setup='{}' 属性必须要(具体是什么意思我也不清楚)
playsinline 为了防止在iPhone手机或者Safari浏览器中自动进入全屏播放

进行初始化

var myVideo = videojs('myVideo',{
    bigPlayButton : true,
    textTrackDisplay : false,
    posterImage: false,
    errorDisplay : false,
})
    myVideo.play() // 视频播放
    myVideo.pause() // 视频暂停

当时也遇到了问题，显示请求跨域，因为这个是挂载在阿里云oss上的，需要进行配置

这是在网上搜索到的

参考文章：
https://www.awaimai.com/2053.html
https://www.jianshu.com/p/16fa00a1ca8e
https://blog.csdn.net/a0405221/article/details/80923090