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>Documenttitle>
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://docs.videojs.com/tutorial-options.html#sources
配置 以及使用如下：
// videojs是全局函数，它可以接收三个参数（id,options,onready）: 第一个参数是video标签的id比如:videojs('#example_video_1');
// 第二参数是配置选项，除了在这里给出之外，还可以通过在video标签中，通过data-setup='{}'属性的形式给出。
// 第三个参数实际上是videojs初始化完成之后的回调函数，在这个里函数里边，可以使用this引用videojs的实例对象。进行开始播放、停止等操作。
//(1)、常用配置选项 *************************************************************
// autoplay: false, //自动播放：true/false
// controls: true, //是否显示底部控制栏：true/false
// width: 300, //视频播放器显示的宽度
// height: 300, //视频播放器显示的高度
// loop: false, //是否循环播放:true/false
// muted: false, //设置默认播放音频：true/false
// poster:"", //视频开始播放前显示的图像的URL。这通常是一个帧的视频或自定义标题屏幕。一旦用户点击“播放”图像就会消失
// src:"", //要嵌入的视频资源url，The source URL to a video source to embed.
// techOrder: ['html5', 'flash'], //使用播放器的顺序,下面的示例说明优先使用html5播放器，如果不支持将使用flash
// notSupportedMessage: false, //是否允许重写默认的消息显示出来时，video.js无法播放媒体源
// plugins: {}, //插件
// sources: [{src: '//path/to/video.mp4', type: 'video/mp4'}] //资源文件等价于html中的形式source标签
// aspectRatio:"1:1" //将播放器置于流体模式下，计算播放器动态大小时使用该值。
// //该值应该是比用冒号隔开的两个数字（如“16:9”或“4:3”）。
// fluid: false, //是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。
// 如果
video 文件 可在此下载