前端播放m3u8

Posted 三天不学习

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端播放m3u8相关的知识,希望对你有一定的参考价值。

<!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://192.168.31.71:8001/FileDir/One/play.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>

以上是关于前端播放m3u8的主要内容,如果未能解决你的问题,请参考以下文章

前端播放m3u8

前端播放m3u8

前端播放大视频卡顿的解决(m3u8视频流)

Spring boot视频播放(解决MP4大文件无法播放),整合ffmpeg,用m3u8切片播放。

阿里云实践 - HTML5断点播放m3u8视频(videojs)

m3u8用啥软件播放