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' //...
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)"...
<vue-core-video-playersrc="http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4"></vue-core-video-player> 本地路径: 不能直接./assets/1.mp4,无效的。需要使用require("...") copy <template><divid="app"><vue-core-video-player:src="url"></vue-core-video-player></div></tem...
return this.$refs.videoPlayer.player//自定义播放 } }, 官方文档 video.js:https://docs.videojs.com/docs/api/player.htmlvue-video-player:https://github.com/surmon-china/vue-video-player 不需要兼容m3u8的,以上就可以实现能播放兼容m3u8的需要下载 npm install --save videojs-contrib-hls 在文件中引...
// this.$refs.videoPlayer.player.preload(val); // 播放控件是否显示 // this.$refs.videoPlayer.player.controls(false); }, 1000); 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21.
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可根据手柄点击展...
videoPlayer }, data () {return{videoSrc:'',playerOptions: {live:true,autoplay:true,// 如果true,浏览器准备好时开始播放muted:false,// 默认情况下将会消除任何音频loop:false,// 是否视频一结束就重新开始preload:'auto',// 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行...
log('player pause!', player) }, // 视频播完回调 onPlayerEnded($event) { console.log(player) }, // DOM元素上的readyState更改导致播放停止 onPlayerWaiting($event) { console.log(player) }, // 已开始播放回调 onPlayerPlaying($event) { console.log(player) }, // 当播放器在当前播放位置...
<video-player class="video-player-box" ref="videoPlayer" :options="playerOptions" :playsinline="false" customEventName="customstatechangedeventname" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" ...
computed: { player() { return this.$refs.videoPlayer.player//自定义播放 } }, 官方文档 video.js:https://docs.videojs.com/docs... vue-video-player:https://github.com/surmon-chi... 不需要兼容m3u8的,以上就可以实现能播放 兼容m3u8的需要下载 npm install --save videojs-contrib-hls 在文件中...