// 安裝依賴 npm install vue-video-player --save npm install videojs-contrib-hls --save// 在main.js中全局引入 import VideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css'; import 'vue-video-player/src/custom-theme.css'; import videojs from 'video.js'; window.videojs = videojs; require('videojs-contrib-hls/dist/videojs-contrib-hls.js');Vue.use(VideoPlayer);//組件中使用 <template><md-card><md-card-actions><div class="md-subhead"><span>HLS Live / 直播</span></div><md-button class="md-icon-button"target="_blank"href="https://github.com/surmon-china/vue-video-player/tree/master/examples/04-video.vue"><md-icon>code</md-icon></md-button></md-card-actions><md-card-media><div class="item"><div class="player"><video-player class="vjs-custom-skin" :options="playerOptions" @ready="playerReadied"></video-player></div></div></md-card-media></md-card> </template><script>export default {data() {return {playerOptions: {// videojs and plugin optionsheight: '360',sources: [{withCredentials: false,type: "application/x-mpegURL",src: "path-to/playlist.m3u8"}],controlBar: {timeDivider: false,durationDisplay: false},flash: { hls: { withCredentials: false }},html5: { hls: { withCredentials: false }},poster: "path-to/static/images/surmon-5.jpg"}}},methods: {playerReadied(player) {var hls = player.tech({ IWillNotUseThisInPlugins: true }).hlsplayer.tech_.hls.xhr.beforeRequest = function(options) {// console.log(options)return options}}}} </script>

　　

轉(zhuǎn)載于:https://www.cnblogs.com/ImaY/p/9040162.html

總結(jié)

以上是生活随笔為你收集整理的vue-video-player集成videojs-contrib-hls实现.m3u8文件播放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。