資訊專欄INFORMATION COLUMN
摘要：由于此款控件使用起來較為簡單，且沒有過多復雜按鈕，只能實時播放攝像頭畫面，適合項目要求，因此選定該款控件作為視頻播放控件。總體思路現將這款控件的代碼封裝為一個組件，可以方便全局實時調用。
該項視頻控件是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 // 給組件定義一個標簽
}
}
通過標簽引用：
使用方法：
通過以上代碼來定義子組件，在父組件中添加相應的代碼后就可以直接使用，上述的組件代碼即為使用方法，由于改代碼還在改進，后期若有更好的優化方案會進行更新。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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
閱讀 2610·2021-09-27 13:37
閱讀 882·2021-09-01 10:50
閱讀 3579·2021-08-16 10:50
閱讀 2217·2019-08-30 15:55
閱讀 2979·2019-08-30 15:55
閱讀 2259·2019-08-30 14:07
