video.js的使用可在vue中使用

老妖zZ

已于 2022-07-14 11:08:32 修改

阅读量692

点赞数

文章标签： vue.js video.js

于 2022-07-14 11:04:21 首次发布

本文链接：https://blog.csdn.net/laoyaoshilaoyao/article/details/125780100

版权

第一种方式

在iondex.html 中引入

<head>
  <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video
    id="video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
  </video>
</body>

第二种方式

npm下载

npm install --save-dev video.js
在main.js 中引入
import 'video.js'

//fluid:true 设置内在元素的比率来做到响应式的宽高
		var player = videojs('video', { fluid: true }, function () {
           console.log('Good to go!');
           //this.play(); // if you don't trust autoplay for some reason
       });
       player.on('play', function () {
           console.log('开始/恢复播放');
       });
       player.on('pause', function () {
           console.log('暂停播放');
       });
       player.on('ended', function () {
           console.log('结束播放');
       });
       player.on('timeupdate', function() {
           console.log(player.currentTime());
       })
       player.on('timeupdate', function () {  
	    // 如果 currentTime() === duration()，则视频已播放完毕
	    if (player.duration() != 0 && player.currentTime() === player.duration()) {
	            // 播放结束
	        }
	    });