video 的使用(video.min.js)

复制代码
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8     <title>Document</title>
  9     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
 10     <link href="videojs/css/video-js.css" rel="stylesheet" type="text/css">
 11     <script src="videojs/js/video.min.js"></script>
 12     <style>
 13         .contaier {
 14             width: 52.0833vw;
 15             height: 46.2963vh;
 16             margin: 1.8519vh auto;
 17         }
 18     </style>
 19 
 20 
 21 
 22 </head>
 23 
 24 <body>
 25     <div class="contaier">
 26         <video id="example_video" width="800" height="500" class="video-js vjs-default-skin " controls poster=""
 27             muted="muted" webkit-playsinline="true" style="object-fit:fill">
 28             <source src="test.mp4">
 29         </video>
 30     </div>
 31     <script>
 32         // var player = videojs('example_video');
 33         var gcdhvideoDef = null;
 34         gcdhvideoDef = videojs("example_video", {
 35             "autoplay": true,
 36             "loop": false,
 37             "preload": true,
 38             "width": $('.contaier').width(),
 39             "height": $('.contaier').height(),
 40             "posterImage": false,
 41             "textTrackDisplay": false,
 42             "loadingSpinner": false,
 43             "bigPlayButton": true,
 44             "controls": true,
 45             "controlBar": true,
 46             "errorDisplay": false,
 47             "textTrackSettings": true
 48         });
 49 
 50         gcdhvideoDef.on("timeupdate", function (event) { // 播放时间改变
 51             var currentTime = parseInt(this.currentTime()); //当前时间
 52         })
341     </script>
342 
343 </body>
344 
345 </html> 
复制代码

官网:   https://videojs.com/advanced?video=disneys-oceans

使用文档 

   https://docs.videojs.com/tutorial-options.html#sources

配置 以及使用如下:

video 文件 可在此下载

 

禁止 右键视频下载

 $('#example_video').bind('contextmenu',function() { return false; });
posted @   蓝色精灵jah  阅读(1355)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示