master

分支 (1)

管理

管理

master

test-ffmpeg
/
player.html


<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（ios亲测有效）</title>
	<script src="https://act.mcake.com/fangli/2018/wap/commonjs/jquery.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
	<link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
	<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
<!--webkit-playsinline="true"  playsinline="true" 设置苹果手机上播放不自动全屏-->
<body>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay  webkit-playsinline="true"
	   playsinline="true"   style="width: 100%; height: 240px;" type="video/m3u8" data-setup='{}'>
	<source id="source"
			src="http://127.0.0.1:8000/荣耀视频测试_m3u8.m3u8"
			type="application/x-mpegURL">
</video>
<script>
	var myVideo = videojs('myVideo',{
		autoplay : true,
		preload:'auto',
	/*	poster:'../material/poster.jpg',*/
		//bigPlayButton : false,
		//textTrackDisplay : false,
		//posterImage: false,
		//errorDisplay : false,
	})
	myVideo.play() // 视频播放
	//myVideo.pause() // 视频暂停
	document.addEventListener("WeixinJSBridgeReady",function() {
		myVideo.play() // 视频播放
	}, false);
</script>
</body>
</html>