摘要：由于此款控件使用起来较为简单，且没有过多复杂按钮，只能实时播放摄像头画面，适合项目要求，因此选定该款控件作为视频播放控件。总体思路现将这款控件的代码封装为一个组件，可以方便全局实时调用。
该项视频控件是npm库中的一个控件，该控件的源地址为：https://www.npmjs.com/package... 。由于此款控件使用起来较为简单，且没有过多复杂按钮，只能实时播放摄像头画面，适合项目要求，因此选定该款控件作为视频播放控件。
总体思路：现将这款控件的代码封装为一个组件，可以方便全局实时调用。这款控件通过不同的id名称可以进行多次的调用，因此在父组件中定义不同的id名称以及视频url进行传参传入组件中。【相对原始代码有修改】
代码弊端：初始的代码需要在加载之前就提供相应的视频url，后期通过修改url无法进行重新调用，为了能通过后台请求拿到相应url，我采用了xuex数据池存值的方式，先加载请求取到相应的url，再进行组件的调用。(可以通过组件调用方式进行引用，在调用组建的时候传入url)
组件代码：
首先在控制台进行组件的安装：npm i hls.js
// id名称为父组件传来的videoValue的值
在父组件中的代码为：
import video from "../components/video.vue"; // 引用组件
export default {
data () {
return {
videoValue0: "video0", // 定义组件id
url0: 1, // 定义下标值
videoValue1: "video1",
url1: 0
}
},
components: {
"videotp": video // 给组件定义一个标签
}
}
通过标签引用：
使用方法：
通过以上代码来定义子组件，在父组件中添加相应的代码后就可以直接使用，上述的组件代码即为使用方法，由于改代码还在改进，后期若有更好的优化方案会进行更新。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105419.html
摘要：后续我们还会增加一些实战类的移动开发案例，欢迎关注专栏。进入官网新版预览在线预览需要使用开启设备模拟，效果更佳。 前言 之前写过一篇 2018开发最快的Webapp框架--BUI交互框架 ，如果你还没看过，可以简单看一下，主要介绍了BUI的基本功能，有多少控件，以及实现的思路，BUI 1.5版本以后变化很大，统一新的风格，新的规范750，新增基于Dom的数据驱动，完善了页面的生命周期等...
摘要：源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，包含个元素，分别代表控件开关和灯光居中显示定义控件的样式，把控件的设置为透明，使其不可见，但仍可与用户交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://code...
摘要：源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，包含个元素，分别代表控件开关和灯光居中显示定义控件的样式，把控件的设置为透明，使其不可见，但仍可与用户交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://code...
阅读 533·2023-04-26 01:39
阅读 4485·2021-11-16 11:45
阅读 2609·2021-09-27 13:37
阅读 882·2021-09-01 10:50
阅读 3578·2021-08-16 10:50
阅读 2217·2019-08-30 15:55
阅读 2979·2019-08-30 15:55
阅读 2259·2019-08-30 14:07
