1.安装 在控制台输入: npm install vue-video-player –s 2.引入组件 在main.js文件中引入组件 import VuevideoPlayer from 'vue-video-player';import 'video.js/dist/video-js.css';Vue.use(VuevideoPlayer);3.导入组件 在要是用组件的页面导入组件,并声明
controlBar: { timeDivider:true,//当前时间和持续时间的分隔符durationDisplay:true,//显示持续时间remainingTimeDisplay:false,//是否显示剩余时间功能fullscreenToggle:true//是否显示全屏按钮} } } } } 【3】效果图 视频格式 type:"video/webm"//可以播放,用ogg也可打开type:"video/ogg"//可以播放,用we...
fullscreenToggle: true // 全屏按钮 } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 2. 组件中使用 vue-video-player 完整代码 <template> <div class="videoWrap"> <video-player class="video-player vjs-custom-skin"...
controlBar:{timeDivider:true,//当前时间和持续时间的分隔符durationDisplay:true,//显示持续时间remainingTimeDisplay:false,//是否显示剩余时间功能fullscreenToggle:true//全屏按钮}}}</script><style>.input_video{width:400px;height:400px;margin:0auto;}</style> 效果如下: 还有可以重写vue-video-player的样...
// fullscreenToggle: true //全屏按钮 // } } } }, components: { videoPlayer }, methods: { //事件 } } </script> <style scoped> </style> 注意事项: vue-video-player 其实就是 video.js 集成到 vue 中,所以千万不要再安装 video.js,可能会出错 播放HLS 流,需要 videojs-contrib-hls 插件...
通过配置项controlBar: {fullscreenToggle: false}, 关闭全屏切换后，由于视频标清、展⽰区域⼤⼩ 483px X 303px,根本看不清视频⾥内容，⽼板⼜说："实现全屏不铺满整个屏幕，⽽是通过固定⼤⼩的弹出层展⽰"⾸先想到的是：开启全屏切换，监听全屏切换的事件，在事件中强制退出全屏，显⽰固定...
fullscreenToggle: true } } return videoPlayerOptions } }, } </script> <style scoped lang="less"> .my_video{ width: 100%; height: calc(100vh - 100px); background-color: white; } .video-js .vjs-big-play-button{ /*对播放按钮的样式进行设置*/ ...
fullScreenHandle(){ console.log('111111') if(!this.player.isFullscreen()){ this.player.requestFullscreen(); this.player.isFullscreen(true); }else{ this.player.exitFullscreen(); this.player.isFullscreen(false); } }, 你期待的结果是什么?实际看到的错误信息又是什么? 希望全屏后,自己定义的事...
controlBar: {//当前时间和持续时间的分隔符timeDivider:true,//显示持续时间durationDisplay:true,//是否显示剩余时间功能remainingTimeDisplay:false,//全屏按钮fullscreenToggle:true} } }; }, computed: { player() {returnthis.$refs.videoPlayer.player//自定义播放}...
controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true //全屏按钮 } } #配置视频源地址 _this.videoInfo1.sources[0].src=_this.listVideoUrl[0]; _this.videoInfo2.sources[0].src=_this.listVideoUrl[1]; _this.videoInfo3.sources[0].src=...