videojs播放监控

记录一个用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>

示例：

videojs播放监控相关推荐

h5 rtmp推荐控件_H5播放Rtmp之videojs播放
一.简介我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所 ...
ffmpeg推流实现实时播放监控画面（rtsp to rtmp）
ffmpeg推流实现实时播放监控画面(windows) 1.提前准备:下载好nginx (官网下载即可) 下载好ffmpeg (windows版本点击下载 http://ffmpeg.zeranoe. ...
【uni-app】H5中使用videojs播放器播放视频
前言 uni-app 项目中,uni-app提供的video控件对H5的兼容性不好(该控件的主要使用目标是小程序). H5中使用videojs播放器替换video控件 videojs播放器在uni-a ...
使用videojs播放m3u8视频
vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库,可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频.流媒体传输协议(hls) ...
videojs播放m3u8后缀视频Demo
videojs播放m3u8后缀视频Demo 转载自:https://segmentfault.com/a/1190000024447688 <!DOCTYPE html><html ...
vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
videoJS 播放 u3m8 格式视频Demo
videoJS 播放 u3m8 格式视频Demo VideoJs 官网地址 <!DOCTYPE html> <html lang="zh-CN"><h ...
使用videojs播放m3u8视频监控。
一 . 实现过程中解决的问题 : 1. 全屏播放 2.切换页面后进入视频无法再次播放,解决方法利用生命周期函数beforeDestroy或onUnload里面销毁创建的video实例. 二.主要代码: ...
Web浏览器基于Flash实时播放监控视频（一）
安装插件插件安装 npm install video.js --save cnpm install --save videojs-flash cnpm install --save videojs- ...

videojs播放监控

videojs播放监控相关推荐

最新文章

热门文章