vue-video-player 播放rtmp视频
vue-video-player 播放rtmp视频加粗样式网址:https://www.npmjs.com/package/vue-video-player代码:可以播放rtmp视频流和hls视频流采用的是flash进行播放 需要引入import ‘videojs-flash’;npm 下载vue-video-player的时候已全部下载下来无需另外下载,cn...
vue-video-player 播放rtmp视频加粗样式
- 网址:
https://www.npmjs.com/package/vue-video-player
-
代码:
-
可以播放rtmp视频流和hls视频流 采用的是flash进行播放 需要引入 import ‘videojs-flash’;
-
npm 下载vue-video-player的时候已全部下载下来 无需另外下载,cnpm下载的时候下载的包和npm的不一样,所以导致不能播放。
-
npm和cnpm下载的依赖有些时候会不一样,可能会导致项目初始化失败或者某个功能失败。
-
代码
import ‘video.js/dist/video-js.css’
import {videoPlayer} from ‘vue-video-player’
import ‘videojs-flash’
export default {
name: “rtmp”,
data(){
return{
input:‘rtmp://live.hkstv.hk.lxdns.com/live/hks1’,
playerOptions: {
width:‘800’,
height: ‘360’,
sources: [{
type: “rtmp/mp4”,
src: “rtmp://202.69.69.180:443/webcast/bshdlive-pc”
}],
techOrder: [‘flash’],
autoplay: false,
controls: true
}
}
},
components: {
videoPlayer
},
computed: {
player() {
console.log(“aaa”)
return this.$refs.videoPlayer.player
}
},
methods:{
playerReadied:function () {
console.log(‘playing!’, this.player);}, onPlayerLoadeddata(player) { console.log('player Loadeddata!', this.player); this.player.play(); }, sure(){ var that = this; that.player.src(that.input); that.player.play(); } } }
如果使用video.js播放rtmp视频流 需要搭建本地服务器才能进行播放,也需要下载video.flash.js;
简单的写一个HTMLdemo会播放失败。
更多推荐
所有评论(0)