[發明專利]一種視頻播放組件開發方法及裝置

有效

• 申請號: 202010582642.2
• 申請日: 2020-06-23
• 公開（公告）號: CN111708522B
• 公開（公告）日: 2023-01-31
• 發明（設計）人: 邢丹
• 申請（專利權）人: 西安雷風電子科技有限公司
• 主分類號: G06F8/20
• 分類號: G06F8/20;G06F8/36;G06F8/38;G06F9/445;G06F16/958
• 代理公司: 西安恒泰知識產權代理事務所 61216
• 代理人: 王芳

1.一種視頻播放組件開發方法，用于在項目工程文件中加載Element-UI視頻播放組件，其特征在于，包括如下步驟：

步驟1、在待安裝視頻播放組件的項目工程文件中全局安裝vue-video-player插件，獲得插件安裝后的項目工程文件；

所述的插件安裝后的項目工程文件包括頁面入口子文件、webpack生產環境核心配置子文件以及components公共組子文件夾；

步驟2、在插件安裝后的項目工程文件的頁面入口子文件中引入vue-video-player插件以及插件樣式后，在所述的webpack生產環境核心配置子文件中配置ProvidePlugin參數，獲得配置后的項目工程文件；

步驟3、在配置后的項目工程文件的components公共組子文件夾中將vue-video-player插件封裝成Element-UI視頻播放組件并加載至配置后的項目工程文件中；

所述的在配置后的項目工程文件的components公共組子文件夾中將vue-video-player插件封裝成Element-UI視頻播放組件，具體包括：

步驟31、在所述的components公共組子文件夾中新建兩個vue格式文件，分別得到第一頁面組件以及第二頁面組件，所述的第一頁面組件為第二頁面組件的父組件；

所述的第一頁面組件以及第二頁面組件均包括template標簽、script標簽以及style標簽；

步驟32、在所述的第一頁面組件的template標簽中設置圖片展示容器；在所述的第一頁面組件的script標簽中獲取所需展示視頻的數據列表，并將數據列表傳遞給第二頁面組件；在所述的第一頁面組件的style標簽中設置所述圖片展示容器的樣式，獲得設置后的第一頁面組件；

步驟33、在所述的第二頁面組件的template標簽中設置視頻展示容器；在所述的第二頁面組件的script標簽中將第一頁面組件傳遞過來的數據與視頻展示容器綁定，并處理視頻播放、暫停事件；在所述的第二頁面組件的style標簽中設置所述視頻展示容器的樣式，獲得設置后的第二頁面組件；

步驟34、步驟32得到的設置后的第一頁面組件和步驟33得到的設置后的第二頁面組件組成Element-UI視頻播放組件。

2.如權利要求1所述的視頻播放組件開發方法，其特征在于，所述的步驟2中在所述的webpack生產環境核心配置子文件中配置ProvidePlugin參數時，將ProvidePlugin參數設置為:new webpack.ProvidePlugin({videojs:'video.js'})。

3.如權利要求1所述的視頻播放組件開發方法，其特征在于，所述的步驟33中所述的第二頁面組件的script標簽包括第二頁面組件props子標簽,第二頁面組件data子標簽，第二頁面組件computed子標簽,第二頁面組件beforeDestroy子標簽以及第二頁面組件methods子標簽；

所述的第二頁面組件props子標簽用于接收第一頁面組件的狀態數據；

所述的第二頁面組件data子標簽用于定義第二頁面組件渲染所需的數據；

所述的第二頁面組件computed子標簽用于監控自己第二頁面組件的player變量的變化；

所述的第二頁面組件beforeDestroy子標簽用于定義當前實例被銷毀時的處理；

所述的第二頁面組件methods子標簽用于定義自定義函數名的方法以及內容。

4.如權利要求1所述的視頻播放組件開發方法，其特征在于，所述的步驟32中第一頁面組件包括的script標簽包括第一頁面組件components子標簽，第一頁面組件data子標簽以及第一頁面組件methods子標簽；

所述的第一頁面組件components子標簽用于引用第二頁面組件；

所述的第一頁面組件data子標簽用于定義第一頁面組件渲染所需的數據；

所述的第一頁面組件methods子標簽用于定義處理數據的交互邏輯。