class="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"@play="onPlayerPlay($event)"@pause="onPlayerPause($event)"@ended="onPlayerEnded($event)"@waiting="onPlayerWaiting($event)"@playing="onPlayerPlaying($event)"@loadeddata="onPlayerLoadeddata($event)"...
在项目中使用npm命令安装即可 代码语言:javascript 复制 npm install vue-video-player 在安装过程中,npm会下载vue-video-player的最新版本并安装到项目中。安装完成后,我们就可以在项目中使用vue-video-player组件了。 此外,vue-video-player依赖于video.js这个视频播放器库,所以安装vue-video-player时也会自动安装vid...
1.安装依赖(亲测5.0.1版本可用,最新版本会找不到'vue-video-player/src/custom-theme.css'这个样式) yarn add vue-video-player@5.0.1 2.main.js里增加以下代码 1import VideoPlayer from 'vue-video-player/src'2import 'video.js/dist/video-js.css'3require('vue-video-player/src/custom-theme.css')...
1:下载vue-video-player npm install -s vue-video-player 1. 2:在main.js中引入相关文件 import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') //引入 hls,视频直播(m3u8)必须引入的 import 'videojs-contrib-hls' //...
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可根据手柄点击展...
<template> <div class="player-container"> <video-player :playsinline="true" class="vjs-custom-skin" :options="playerOptions" /> </div> </template> <script> export default { data() { return { playerOptions: { playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度 autoplay: true, // ...
import{videoPlayer}from'vue-video-player'import'video.js/dist/video-js.css'exportdefault{components:{videoPlayer}} 三、使用 1.htmlplaysinline不希望用户来拖动进度条 2.js export default{data(){return{playerOptions:{playbackRates:[0.5,1.0,1.5,2.0],// 可选的播放速度autoplay:false,// 如果为true...
</video-player> </div> </template>【2】js 部分 1 2 3 4 5 6 7 8 9export default { data() { return { playerOptions: { playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度 autoplay: false, // 如果为true,浏览器准备好时开始回放。 muted: false, /...
playsinline="true" :options="playerOptions" ></video-player> </div> </div> </template> <script> import 'videojs-contrib-hls' export default { name: 'App', data() { return{ playerOptions : { playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 autoplay: false, //若是true,浏览器...
data () {return{// 配置信息playerOptions: {playbackRates: [0.7,1.0,1.5,2.0],// 播放速度autoplay:false,// 如果true,浏览器准备好时开始回放。muted:false,// 默认情况下将会消除任何音频。loop:false,// 导致视频一结束就重新开始。preload:'auto',// 建议浏览器在<video>加载元素后是否应该开始下载...