jq + hls.js 播放m3u8的视频

最新推荐文章于 2023-01-04 10:21:44 发布

Too_sober

最新推荐文章于 2023-01-04 10:21:44 发布

阅读量869

点赞数

分类专栏：前端 js css 文章标签： javascript 音视频开发语言

本文链接：https://blog.csdn.net/Too_sober/article/details/128098637

版权

前端同时被 3 个专栏收录

15 篇文章 1 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

引入jq

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

需要引入hls.js

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

$(function() {
		$('#testVideo').hide();
	});
	
	function bt() {
		loadVideo('播放地址');
		$('#bt').hide();
		$('#testVideo').show();
	}

	function loadVideo(vedio_url) {
		var video = document.getElementById('testVideo');
		if (Hls.isSupported()) {
			var hls = new Hls();
			hls.loadSource(vedio_url);
			hls.attachMedia(video);
			hls.on(Hls.Events.MANIFEST_PARSED, function() {
				video.play();
			});
		} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
			video.src = vedio_url;
			video.addEventListener('loadedmetadata', function() {
				video.play();
			});
		}
	}