html中播放m3u8文件

更换有效src打开就行<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>播放m3u8格式</title><link href="https://unpkg.com/video.js/dist/video-js.css" rel="st

雷haoming

11859人浏览 · 2021-04-13 15:14:52

雷haoming · 2021-04-13 15:14:52 发布

更换有效src打开就行

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>播放m3u8格式</title>
		<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
		<script src="https://unpkg.com/video.js/dist/video.js"></script>
		<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
		<!-- videojs-contrib-hls 用于在电脑端播放 如果只需移动端播放可以不引入 -->
	</head>
	<body>
		<style>
			.video-js .vjs-tech {position: relative !important;}
    	</style>
		<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/GDj5iLK/live.m3u8" type="application/x-mpegURL">
				</source>
			</video>
		</div>
	</body>

	<script>
		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();
		}
	</script>