视频监控展示插件-js,支持多种视频格式
文件引入
<!-- 在head标签中添加Video.js -->
<link href="video/videolib/css/video-js.min.css" rel="stylesheet" type="text/css">
<script src="video/videolib/js/video.min.js"></script><!-- 在body标签结束前添加视频弹窗组件 -->
<script src="js/videoModal.js"></script>
使用方法
let Params="002"
console.log('触发视频弹窗展示,参数:', Params);if (typeof openVideoModal === 'function') {// 根据Params参数构建视频URL(这里需要根据您的实际API调整)var videoUrl = null;var cameraName = "摄像头" + (Params || "001");// 如果有具体的视频编码,可以构建视频URLif (Params && Params !== '') {// 这里需要根据您的视频服务API来构建URL// 例如:videoUrl = 'http://your-video-server.com/stream/' + Params;videoUrl = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'; // 临时测试视频}// 打开视频弹窗openVideoModal({draggable: true,title: "视频监控 - " + cameraName,videoUrl: videoUrl,cameraInfo: {name: cameraName,resolution: "1920x1080",status: "在线"},onClose: function() {console.log('视频弹窗已关闭');},onFullscreen: function(isFullscreen) {console.log('全屏状态:', isFullscreen ? '进入全屏' : '退出全屏');}});} else {console.warn('视频弹窗组件未加载,请确保已引入videoModal.js');}