videojs播放监控

原创已于 2022-12-06 15:37:08 修改 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2022-12-06 15:35:04 首次发布

Javascript 同时被 2 个专栏收录

33 篇文章

订阅专栏

HTML5

18 篇文章

订阅专栏

记录一个用videojs播放监控的demo。

<head>
	<!-- 1. 引入videojs的CSS。 -->
	<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />

	<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
	<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>

	<video id="Video1" class="video-js vjs-default-skin vjs-big-play-centered" data-setup="{}" muted="muted">    
		<source id="source" >
		<p class="vjs-no-js">
		  To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
		</p>
	</video>


	<video id="Video2" class="video-js vjs-default-skin vjs-big-play-centered" data-setup="{}" muted="muted">    
		<source id="source" >
		<p class="vjs-no-js">
		  To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
		</p>
	</video>


<!-- 2. 引入videojs的JS。 --> 
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>

<script>

/** 3. 执行播放的方法。
*	videoID：html标准<video>标签的id。
*	hslUrl：hsl格式视频的地址。
*/
function videoOne(videoID,hslUrl){
var src=hslUrl
var myVideo = videojs(videoID, {
	controls: true,
	autoplay: true,
	playToggle: false,
	preload:"auto",
	poster:"login.png",	//未播放时的预览图片。
	width: 300, 
	height: 200
})
myVideo.src([
	{type: 'application/x-mpegURL', src:src }
	//如果是mp4
	//{type: 'video/mp4', src:src }
])
}


//4. 值参使用。
videoOne('Video1','http://hx0xxx1en.ys7.com/open3235xlive/90xxffd8fac3bb486b83cb1xxxxxxx3f6.m3u8')
videoOne('Video2','http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8')


</script>

</body>

示例：