Vue中使用vue |
您所在的位置：网站首页 › 璞百度百科 › Vue中使用vue |
|
场景
若依前后端分离版手把手教你本地搭建环境并运行项目： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面搭建项目的基础上，先实现了播放rtmp视频流 Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/123330241 如果需要在本地模拟出播放视频效果，需要播放本地的mp4文件。 注： 博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现1、同上面流程一样，安装vue-video-player插件 npm install vue-video-player --save这里只安装这一个插件即可 2、页面中局部引入 import { videoPlayer } from "vue-video-player"; import 'video.js/dist/video-js.css'在components中声明 components: { videoPlayer, },3、页面添加播放器 4、设置播放器的相关属性 playerOptions: { width: "800px", height: "600px", language: "zh-CN", muted: true,// 默认情况下将会消除任何音频 autoplay: true,// 如果true,浏览器准备好时开始回放。 controls: false, //不显示暂停、声音、进度条组件 loop: true, // 视频一结束就重新开始。 sources: [ { type: "video/mp4", src: "/video/video2.mp4" // url地址 }, ], },注意这里的url对应的路径是 5、完整示例代码 import { videoPlayer } from "vue-video-player"; import 'video.js/dist/video-js.css' export default { name: "HkVideo", components: { videoPlayer, }, data() { return { videoOpen: false, playerOptions: { width: "800px", height: "600px", language: "zh-CN", muted: true,// 默认情况下将会消除任何音频 autoplay: true,// 如果true,浏览器准备好时开始回放。 controls: false, //不显示暂停、声音、进度条组件 loop: true, // 视频一结束就重新开始。 sources: [ { type: "video/mp4", src: "/video/video2.mp4" // url地址 }, ], }, }; }, destroyed() {}, methods: { //预览功能 preview() { console.log("preview"); }, //停止全部预览功能 stopAllPreview() {}, //关闭视频窗口 closeWindow() {}, // 查看摄像 videoChange() { this.videoOpen = true; //模拟摄像头预览 }, // 关闭摄像头弹窗 videoClose() { this.videoOpen = false; this.closeWindow(); }, }, }; .video_box { width: 100%; height: 100%; } .plugin { width: 100%; height: 100%; } .playWnd { width: 800px; height: 600px; margin: 0; } .video_box { ::v-deep .el-dialog__body { padding: 0 !important; } }原文地址：https://www.cnblogs.com/badaoliumangqizhi/p/16962393.html |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |