h5播m3u8格式视频流
在微信公众号的某个页面接入监控视频(.m3u8格式的)，需求相对简单，能够播放就可以，之前没有处理过mp4格式外的视频文件，记录一下；
###1.使用video.js来播放
pc播放的一个.html的小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PC HLS video</title>
<link href="http://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css" rel="stylesheet">
</head>
<body>
<h1>PC 端播放 HLS(<code>.m3u8</code>) 视频</h1>
<p>借助 video.js 和 videojs-contrib-hls</p>
<p>由于 videojs-contrib-hls 需要通过 XHR 来获取解析 m3u8 文件, 因此会遭遇跨域问题, 请设置浏览器运行跨域</p>
<video id="hls-video" width="300" height="200" class="video-js vjs-default-skin"
playsinline webkit-playsinline
autoplay controls preload="auto"
x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5">
<!-- 点播的视频源 -->
<source src="http://devstreaming.apple.com/videos/wwdc/2015/413eflf3lrh1tyo/413/hls_vod_mvp.m3u8" type="application/x-mpegURL">
</video>
<script src="http://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script>
<!-- PC 端浏览器不支持播放 hls 文件(m3u8), 需要 videojs-contrib-hls 来给我们解码 -->
<script src="http://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script>
<script>
// XMLHttpRequest cannot load http://xxx/video.m3u8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.198.98:8000' is therefore not allowed access.
// 由于 videojs-contrib-hls 需要通过 XHR 来获取解析 m3u8 文件, 因此会遭遇跨域问题, 请设置浏览器运行跨域
var player = videojs('hls-video');
player.play();
</script>
</body>
</html>
小例子也是网上找的，有效的，移动端的话可以不需要引入videojs-contrib-hls.js，加这个控制台会报错，去掉后放到线上可以正常播放视频。
vue使用命令安装然后引入
npm install video.js -save
npm install videojs-contrib-hls -save
在需要用到的vue文件内部引用
import videojs from 'video.js'
import 'videojs-contrib-hls'
在main.js文件中全局引入css文件
import 'video.js/dist/video-js.css'
###2.使用视频播放插件来播放
EasyPlayer.js H5播放器
https://www.npmjs.com/package/@easydarwin/easywasmplayer?activeTab=readme
MuiPlayer
https://muiplayer.js.org/zh/guide/begin.html
（这个播放器目前我遇到的弊端就是我退出了播放页视频资源还是在加载，设置成直播模式虽然没有进度条但是左下角会显示直播两个字，设置自动播放没有生效）
西瓜播放器
https://v2.h5player.bytedance.com/gettingStarted/
这个播放器是可以在线生成演示，不过用m3u8格式在线播放不了，然后我仔细看了一下介绍，是可以直接播放m3u8格式的视频（设置成直播模式没有多余的字，可以自动播放）
最后使用的是西瓜播放器，先在官网粘贴命令安装
npm install xgplayer -save
npm install xgplayer-hls -save
npm install xgplayer-hls.js -save
写了一个组件在需要用到的页面直接引用就好，在components目录下创建一个live-video.vue文件
<template>
<div id="mse" />
</template>
<script>
import 'xgplayer'
import HlsJsPlayer from 'xgplayer-hls.js'
import HlsPlayer from 'xgplayer-hls'
export default {
name: 'liveVideo',
props: {
src: {
type: String,
default: ''
},
title: {
type: String,
default: ''
}
},
data() {
return {}
},
mounted() {
var player = new HlsPlayer({
id: 'mse',
url: this.src,
isLive: true, //直播场景设置为true
autoplay: true,// 自动播放
fitVideoSize: 'auto',
videoInit: false, //初始化显示首帧 该配置在移动端无效。该配置与autoplay配置项不可同时设置为true。
closeVideoClick: true,
ignores: ['time', 'play', 'volume', 'progress'],
'x5-video-player-type': 'h5', //微信同层播放
'x5-video-player-fullscreen': true, //微信全屏播放
'x5-video-orientation': 'portraint', //微信横竖屏控制
playsinline: false //内联模式,为false时，ios进入页面就自动竖屏全屏播放
})
},
methods: {}
}
</script>
<style scoped>
#mse {
width: 90% !important;
height: 80% !important;
margin-top: 4%;
margin-left: 5%;
}
</style>
在使用页面引入
import liveVideo from '@/components/live-video.vue'
components: {
liveVideo
}
使用
<live-video
src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8"
title=""
/>
同事提供的视频路径前面是个ip地址，浏览器或者微信开发者程序在使用视频播放插件的时候，会一直报跨域的错误，而且视频播放不出来，其实打包到线上都是可以直接使用，还特地去问了一下部署配置项目的同事，一致认为还没到那一步，然后就打包更新到线上公众号上了，功能正常