在vue中播放m3u8格式文件

index.html引入样式文件

这里用的是在线链接，也可以把它转成本地文件引入

<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet" />

组件中html代码

		<div>
			<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'
			 style='width: 100%;height: auto'>
				<source id="source" src="http://xxxxxx/openUrl/DIwGl32/live.m3u8" type="application/x-mpegURL">
				</source>
			</video>
		</div>

组件中文件引入

在vue中需要把在线文件转为本地文件，再去引入
地址：https://unpkg.com/video.js/dist/video.js

注意：这里需要把videojs拿出来，不然下面用不了

import { videojs } from './video.js'

调用方法

在组件挂载之后调用方法

mounted(){
	var myVideo = videojs('myVideo', {
			bigPlayButton: true,
			textTrackDisplay: false,
			posterImage: false,
			errorDisplay: false,
		})
		myVideo.play()
		var changeVideo = function(vdoSrc) {
			if (/\.m3u8$/.test(vdoSrc)) {
				myVideo.src({
					src: vdoSrc,
					type: 'application/x-mpegURL'
				})
			} else {
				myVideo.src(vdoSrc)
			}
			myVideo.load();
			myVideo.play();
		}
}