npm install vue-video-player --save 1. 1 引入样式 // 第一个是videoJs的样式,后一个是vue-video-player的样式,因为考虑到我其他业务组件可能也会用到视频播放,所以就放在了main.js内 require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') 1. 2. 3. 把VueVid...
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...
<template><video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></template><script>exportdefault{name:'BusImg', data () {return{// 视频播放playerOptions : {playbackRates: [0.7,1.0,1.5,2.0],//播放速度autoplay:false,//...
<video-playerref="videoPlayer"class="video-player vjs-custom-skin"style="width: 1000px;height: 576px;display: inline-flex":playsinline="true":options="playerOptions"@pause="onPlayerPause($event)"@ended="onPlayerEnded($event)"@play="onPlayerPlay($event)"@timeupdate="onPlayerTimeupdate($event...
type: "video/webm", type: "video/ogg", type: "video/3gp", type: "video/mp4", 腾讯视频地址获取方法 1、点击进入视频播放 2、利用快捷键“F12”打开开发人员工具,然后选择“network”栏目,然后选择“media” 3、以上设置完成后我们按一下“F5”键刷新当前页面,这时候开发工具就会抓取页面调用的信息,我们...
当我点击表格第一行的查看按钮,显示出两个视频,我再点击第二行出现的是第一行的视频,视频地址没有更新过来,有没有大佬帮帮孩子,纠结一下午了~~~o(╥﹏╥)o 这是页面的视频代码:<li v-for="(item, index) in proinfo.videoList" :key="index"> <video-player class...
console.log('Video is paused'); }, handleEnded() { console.log('Video has ended'); } } } </script> 二、使用Vue组件 Vue的组件化思想可以帮助我们更好地管理和复用代码。创建一个视频播放组件: 创建VideoPlayer组件: <template> <div>
首先是,插件Github地址vue-video-player插件 目标效果 点击右侧图片,左侧视频源随之变化 第一步 npm npm install vue-video-player --save Main.js import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') ...
playerReadied(player, playtimes) { player.currentTime(playtimes) } 调用方式 const player1 = this.$refs.videoPlayer[0].player //开始时间-视频的实际开始时间=播放至多少秒 let val2 = (begin.getTime() - player4StartTime.getTime())/1000 ...
</video-player> ——— // 音视频资源加载完毕 如果不可在线播放 可通过此方法判断是否可以开始播放给用户提示 onPlayerLoadeddata(player) { // 方法调用即资源加载完毕可进行播放 this.canplay = true; // 获取资源总时长 let duration = player.cache_....