m3u8视频流播放

最新推荐文章于 2024-07-06 16:47:02 发布

木子海

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量142

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/u014234725/article/details/139239827

版权

js 文件引入
hls文件

<script src="./js/hls.min.js"></script>

<video id="my_video_3" style="margin-top: 21px;max-height: 500px;"
									   class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto"
									   width="100%" height="480"
								>
									<!--src: 规定媒体文件的 URL  type:规定媒体资源的类型-->
									<source src='地址' type='rtmp/flv' />
								</video>
								<script type="text/javascript">
									$(function (){
										var HLS_Player = document.getElementById('my_video_3');
										HLS_Controller = new Hls();
										HLS_Controller.loadSource('需要替换的地址');
										HLS_Controller.attachMedia(HLS_Player);
										HLS_Controller.on(Hls.Events.MANIFEST_PARSED, function() {
											HLS_Player.muted=true//页面加载时需要静音播放有交互时可已去掉，如点击按钮打开弹框播放
											HLS_Player.play();
										});
									})
								</script>