vue项目里面使用video.js视频播放插件

项目里面需要实现一个视频播放列表

如上图所示的列表~~~过程如下：

引入video.js文件

npm install -S video.js

在main.js里面引入相关文件，并挂载在window对象上

import videojs from 'video.js';
import "video.js/dist/video-js.min.css";
window.videojs = videojs;

在页面使用播放器

html

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}"  :poster="video_over_img" webkit-playsinline="true" playsinline="true"><source :src="lesson_detail.url" type="video/mp4">
</video>

初始化

let that = this;this.$nextTick(() => {that.player = videojs('example_video_1');that.player.on("ended",function(){//视频结束的操作that.option();})  })

切换不同的视频文件

ps: 点击不同的按钮实现播放不同的视频。

//url为不同的视频链接，在切换视频的时候调用
this.player.src(url);
this.player.poster(image);
this.player.load();

常用事件:

ps:用上文中初始化的视频播放对象来说明

this.player.play(); ---- 播放
this.player.pause(); ---- 暂停
this.player.dispose(); ---- 销毁
this.player.on(‘click‘, fn) ;---- 监听
ended：视频播放结束
pause：点击暂停
play：点击播放
volumechange：声音改变
timeupdate：视频播放中
seeked：视频跳转结束
seeking：视频跳转中
this.player.trigger(‘dispose‘); ---- 触发事件

常用选项

autoplay: true/false 播放器准备好之后，是否自动播放【默认false】
controlBar: true/false 是否拥有控制条【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮.
loop: true/false 视频播放结束后，是否循环播放
muted : true/false 是否静音
poster: 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
preload:预加载（‘auto‘：自动/’metadata‘ 元数据信息，比如视频长度，尺寸等/‘none‘ 不预加载任何数据，直到用户开始播放才开始下载）

附上：
video.js官网

然后就：

结束啦~~~

vue项目里面使用video.js视频播放插件相关推荐

如何在vue项目中引入video.js插件
借鉴了不少文章,照着来净报错,恼了自己给自己留一篇绝不报错的! 参考文章:https://www.jianshu.com/p/8b8023c7ed37 一.安装 $ npm install video ...
在vue项目中使用video.js实现视频播放和视频进度条打点
一.用video.js实现视频播放 1.安装video.js插件 // 安装video.js插件 npm install video.js -S // 如果需要播放rtmp直播流,需安装一下插件 np ...
video.js 视频播放插件使用
video.js 实现视频播放,多种语言字幕点击切换 1.参考链接video.js官网 https://videojs.com/ 2.html代码视频资源标签source track 字幕资源标签,在 ...
video.js视频播放器进度条标记的功能实现
video.js视频播放器的使用 video.js视频播放器安装引入使用 video.js视频播放器接到个需求,需要一个视频播放页面,并且进度条需要在某个时间点打上标记.在网上找了一下,发现 ...
在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue 项目中使用three.js实现vr360度全景图片预览
vue 项目中使用three.js实现vr360度全景图片预览当前demo使用的three.js为0.115.0版本项目中安装three npm install three 安装完成再组件如下导入 ...
Vue中使用Video.js视频播放器
Video.js是一个有着HTML5背景的网络视频播放器.它同时支持HTM5和Flash视频,简单来说就是HTMl5 和 Flash 视频播放器安装: npm install video.js ma ...
Vue中引入Video.js视频播放器
安装 $ npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css ...

vue项目里面使用video.js视频播放插件

项目里面需要实现一个视频播放列表

引入video.js文件

在页面使用播放器

切换不同的视频文件

常用事件:

常用选项

然后就：

vue项目里面使用video.js视频播放插件相关推荐

最新文章

热门文章