html5中使用video.js播放器播放m3u8直播文件,兼容微信浏览器自动播放(ios亲测有效)


!DOCTYPE html
html lang="zh-CN"
head
	meta charset="UTF-8"
	title正在直播中/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://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.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

 

最新回复(0)
/jishuvmoFVJoKir214XEbB3c42_2BEFrDp38JCqTdrcvyPlGo0_3D4776489
8 简首页