<!-- https://videojs.com/ -->
<html lang="en"><head>
<meta charset="utf-8">
<title>Admin | Video</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="" name="wzy">
<link href="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>
<div style="width: 33%;height: 200px;">
<video
id="my-video"
class="video-js"
>
<!-- <source src="oceans.mp4" type="video/mp4" /> -->
<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>
</div>
<div style="width: 33%;height: 200px;">
<video
id="my-video2"
class="video-js"
>
<!-- <source src="oceans.mp4" type="video/mp4" /> -->
<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>
</div>
<script src="./video.min.js"></script>
<script src="./jquery-3.3.1.min.js"></script>
<script>
var player = videojs('my-video', {
autoplay: 'false',//any以流量器支持的方式自动播放
muted:false,//设置true流量器才能自动播放
controls: true,
loop:true,
preload:'metadata',
fluid:true,
width: '500px',
height: '400px',
playbackRates: [0.5, 1, 1.5, 2],
// poster: "Snipaste_2023-01-30_11-02-09.png",
dataSetup: {
},
plugins: {
// foo: {bar: true},
// boo: {baz: false}
}
});
var player2 = videojs('my-video2', {
autoplay: 'any',//any以流量器支持的方式自动播放
muted:false,//设置true流量器才能自动播放
controls: true,
loop:true,
preload:'metadata',
fluid:true,
width: '500px',
height: '400px',
playbackRates: [0.5, 1, 1.5, 2],
// poster: "Snipaste_2023-01-30_11-02-09.png",
dataSetup: {
},
plugins: {
// foo: {bar: true},
// boo: {baz: false}
}
});
player.src({type: 'video/mp4', src: 'oceans.mp4'});
player2.src({src: 'V-143405-B7736A80.mp4'});
player.ready(function() {
// get
var howLoudIsIt = player.volume();
console.log(howLoudIsIt)
// set
player.volume(0.5); // Set volume to half
// player.play();
// player.pause();
setTimeout(()=>{
player.pause();
player.muted(false);
console.log(player.currentTime())
player.currentTime(10);
},1000)
});
// player.on('ended', function() {
// this.dispose();
// });
</script>
</body>
</html>
video.js使用常用方法110行demo源程序资源
需积分: 5 101 浏览量
2023-01-31
11:59:44
上传
评论
收藏 82.53MB RAR 举报
videojs-demo.rar （9个子文件） 
videojs-demo 
Snipaste_2023-01-31_11-29-53.png 198KB
video-js.css 47KB
V-143405-B7736A80.mp4 5.44MB oceans.mp4 21.95MB Snipaste_2023-01-30_11-02-09.png 50KB
index.html 3KB V-143405-B7736A80.ts 21.62MB video.min.js 574KB oceans.flv 35.21MB资源评论
