videoChange() {this.videoOpen =true;//生成1到3之间的随机整数let url ="/video/video"+Math.floor((3+1-1) * Math.random() +1)+".mp4"//url地址this.playerOptions['sources'][0]['src'] =url; }, 注意这里的videoChange是在父组件的预览按钮的点击事件中调用 videoChange() {this.$refs.ca...
this.playerOptions['sources'][0]['src'] = url; 1. 2. 这里url通过模拟1到3之间的整数拼接获取,因为这里准备了三个mp4文件 3、然后在点击预览或播放时动态生成或赋值url videoChange() { this.videoOpen = true; //生成1到3之间的随机整数 let url = "/video/video"+Math.floor((3+1- 1) * Ma...
默认playerOptions.autoplay = false; 在点击确认自动播放按钮之后,设置为playerOptions.autoplay = true; 这样会自动播放,但是不会跳转到特定位置,不知道原因, 于是使用this.player.play() 方法强行执行播放 完整代码 <video-player class="video-player vjs-custom-skin":playsinline="true":options="playerOptions"@...
(ref="videoPlayer") const player1 = this.$refs.videoPlayer[0].player const player2 = this.$refs.videoPlayer[1].player this.$refs.videoPlayer[1].player.play() this.$refs.videoPlayer[1].player.pause() 2、播放指定时间点的视频方法 playerReadied(player, playtimes) { player.currentTime(play...
此外,vue-video-player依赖于video.js这个视频播放器库,所以安装vue-video-player时也会自动安装video.js。如果需要,我们还可以在安装vue-video-player时手动指定video.js的版本 代码语言:javascript 复制 npm install vue-video-player@latest video.js@7.9.0 项目中配置 在main.js 中进行全局配置,通过window.video...
在页面加载、按钮点击或任何其他事件触发时,调用此方法以从指定时间点开始播放视频。 以下是一个示例代码,展示了如何在Vue中实现这一功能: vue <template> <div> <!-- 视频播放器 --> <video ref="videoPlayer" :src="videoSrc" controls @canplaythrough="handleCanPlayThrough">...
vue-video-player 适用于 Vue 的 video.js 播放器组件。 1. 安装及引入使用 github 地址 npm 地址 安装 npm install vue-video-player --save复制代码 1. 全局引入 import VueVideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css'; ...
vue-video-player 项目地址:https://github.com/surmon-china/vue-video-player。 video.js文档地址:http://docs.videojs.com/docs/api/player.html。 项目目录: 一、外层ui布局 图一中可以看到,本次项目使用的是两栏自适应布局,其中,右侧为播放列表,固定宽度500px,左边是播放器box,播放列表box可根据手柄点击展...
首先,为了减少包体积,在组件中局部引入vue-video-player(在main.j s中引入会增加包体积) 播放m3u8需要注意两点: 需要引入videojs并绑定到window上 安装依赖videojs-contrib-hls(npm i videojs-contrib-hls)并引入 sources要指定type为application/x-mpegURL ...
1,安装vue-video-player npm install vue-video-player --save 2,在main.js里面引入 import VideoPlayer from 'vue-video-player' require('vue-video-player/node_modules/video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') ...