實(shí)習(xí)快要結(jié)束户敬,想把實(shí)習(xí)項(xiàng)目的一部分記錄一下
(項(xiàng)目創(chuàng)建就略過了)
一、 播放器基本實(shí)現(xiàn)
? ? 采用vue-video-player? 順序依次是
? ? 1.? 安裝依賴
? ? ? ? ? npm install vue-video-player --save
? ? 2.? ?在main.js中引入
? ? ? ? ? import VueVideoPlayer from 'vue-video-player';
? ? ? ? ? Vue.use(VueVideoPlayer);
? ? 3.? ?在播放器組件中單獨(dú)添加css和hls
? ? ? ? ? import "video.js/dist/video-js.css";
? ? ? ? ? import "vue-video-player/src/custom-theme.css";
? ? ? ? ? import 'videojs-contrib-hls.js/src/videojs.hlsjs';
? ? ?4.? 在template標(biāo)簽下需要用到播放器的位置寫入播放器標(biāo)簽
? ? ? ? ? <div class="video-wrapper">
????????????????<video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
? ? ? ? ? </div>
? ? ? 5.? 在data中寫入基本參數(shù)
? ? ? 6.? 打開頁面之后效果圖
二、切換視頻源/視頻類型(也可以播放音頻)
?在想要的按鈕上綁定一個(gè)點(diǎn)擊事件即可,以下是我寫的點(diǎn)擊事件(用了封裝過的axios向后端發(fā)起請(qǐng)求得到數(shù)據(jù))
直播(hls直播流)的type就用 application/x-mpegURL
點(diǎn)播的type就用? video/mp4
以上就是實(shí)習(xí)項(xiàng)目中關(guān)于移動(dòng)端播放器的一部分內(nèi)容
如有錯(cuò)誤請(qǐng)各位大大指點(diǎn)一下? 歡迎質(zhì)疑