資訊專欄INFORMATION COLUMN
摘要：由于此款控件使用起來(lái)較為簡(jiǎn)單，且沒(méi)有過(guò)多復(fù)雜按鈕，只能實(shí)時(shí)播放攝像頭畫面，適合項(xiàng)目要求，因此選定該款控件作為視頻播放控件?？傮w思路現(xiàn)將這款控件的代碼封裝為一個(gè)組件，可以方便全局實(shí)時(shí)調(diào)用。
該項(xiàng)視頻控件是npm庫(kù)中的一個(gè)控件，該控件的源地址為：https://www.npmjs.com/package... 。由于此款控件使用起來(lái)較為簡(jiǎn)單，且沒(méi)有過(guò)多復(fù)雜按鈕，只能實(shí)時(shí)播放攝像頭畫面，適合項(xiàng)目要求，因此選定該款控件作為視頻播放控件。
總體思路：現(xiàn)將這款控件的代碼封裝為一個(gè)組件，可以方便全局實(shí)時(shí)調(diào)用。這款控件通過(guò)不同的id名稱可以進(jìn)行多次的調(diào)用，因此在父組件中定義不同的id名稱以及視頻url進(jìn)行傳參傳入組件中。【相對(duì)原始代碼有修改】
代碼弊端：初始的代碼需要在加載之前就提供相應(yīng)的視頻url，后期通過(guò)修改url無(wú)法進(jìn)行重新調(diào)用，為了能通過(guò)后臺(tái)請(qǐng)求拿到相應(yīng)url，我采用了xuex數(shù)據(jù)池存值的方式，先加載請(qǐng)求取到相應(yīng)的url，再進(jìn)行組件的調(diào)用。(可以通過(guò)組件調(diào)用方式進(jìn)行引用，在調(diào)用組建的時(shí)候傳入url)
組件代碼：
首先在控制臺(tái)進(jìn)行組件的安裝：npm i hls.js
// id名稱為父組件傳來(lái)的videoValue的值
在父組件中的代碼為：
import video from "../components/video.vue"; // 引用組件
export default {
data () {
return {
videoValue0: "video0", // 定義組件id
url0: 1, // 定義下標(biāo)值
videoValue1: "video1",
url1: 0
}
},
components: {
"videotp": video // 給組件定義一個(gè)標(biāo)簽
}
}
通過(guò)標(biāo)簽引用：
使用方法：
通過(guò)以上代碼來(lái)定義子組件，在父組件中添加相應(yīng)的代碼后就可以直接使用，上述的組件代碼即為使用方法，由于改代碼還在改進(jìn)，后期若有更好的優(yōu)化方案會(huì)進(jìn)行更新。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105419.html
摘要：后續(xù)我們還會(huì)增加一些實(shí)戰(zhàn)類的移動(dòng)開(kāi)發(fā)案例，歡迎關(guān)注專欄。進(jìn)入官網(wǎng)新版預(yù)覽在線預(yù)覽需要使用開(kāi)啟設(shè)備模擬，效果更佳。 前言 之前寫過(guò)一篇 2018開(kāi)發(fā)最快的Webapp框架--BUI交互框架 ，如果你還沒(méi)看過(guò)，可以簡(jiǎn)單看一下，主要介紹了BUI的基本功能，有多少控件，以及實(shí)現(xiàn)的思路，BUI 1.5版本以后變化很大，統(tǒng)一新的風(fēng)格，新的規(guī)范750，新增基于Dom的數(shù)據(jù)驅(qū)動(dòng)，完善了頁(yè)面的生命周期等...
摘要：源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀定義，包含個(gè)元素，分別代表控件開(kāi)關(guān)和燈光居中顯示定義控件的樣式，把控件的設(shè)置為透明，使其不可見(jiàn)，但仍可與用戶交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://code...
摘要：源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀定義，包含個(gè)元素，分別代表控件開(kāi)關(guān)和燈光居中顯示定義控件的樣式，把控件的設(shè)置為透明，使其不可見(jiàn)，但仍可與用戶交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://code...
閱讀 546·2023-04-26 01:39
閱讀 4539·2021-11-16 11:45
閱讀 2624·2021-09-27 13:37
閱讀 902·2021-09-01 10:50
閱讀 3619·2021-08-16 10:50
閱讀 2234·2019-08-30 15:55
閱讀 2997·2019-08-30 15:55
閱讀 2269·2019-08-30 14:07
