hsl m3u8格式的视频用vue-video-player 接入网页的实例demo
安装 vue-video-player(视频播放器)和videojs-contrib-hls(hls传输)//安装npm install vue-video-player --savenpm install --save videojs-contrib-hls//页面<template><md-card><md-card-ac
·
安装 vue-video-player(视频播放器)和videojs-contrib-hls(hls传输)
//安装
npm install vue-video-player --save
npm install --save videojs-contrib-hls
//页面
<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>
// custom skin css
import '../src/custom-theme.css'
// videojs
import videojs from 'video.js'
window.videojs = videojs//要先声明,在下方的hls.js中要用到,不然视频会出错
// hls plugin for videojs6
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
// export
export default {
data() {
return {
playerOptions: {
// videojs and plugin options
height: '360',
sources: [{
withCredentials: false,
type: "application/x-mpegURL",
src: "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8"
}],
controlBar: {
timeDivider: false,
durationDisplay: false
},
flash: { hls: { withCredentials: false }},
html5: { hls: { withCredentials: false }},
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg"
}
}
},
methods: {
playerReadied(player) {
var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
player.tech_.hls.xhr.beforeRequest = function(options) {
// console.log(options)
return options
}
}
}
}
</script>
above attendtion:
firstly:
import videojs from 'video.js'
window.videojs = videojs//要先声明,在下方的hls.js中要用到,不然视频会出错
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
second:
如果打包部署后出错,如下图:
只需在webpackbase.config.js或者相关配置文件中的
moudule对象中添加 noParse: [/videojs-contrib-hls/],
更多推荐
已为社区贡献3条内容
所有评论(0)