通过命令行进行安装
npm install --save vue-video-player
npm install --save videojs-flash
注意!!!安装建议使用npm安装,不要使用cnpm安装,不知道何种原因cnpm安装可能会导致一些错误,使用npm安装则一点毛病没有
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
vue组件代码如下:
<videoPlayer ref="videoPlayer"
class="vjs-custom-skin videoPlayer"
:options="videoOptions"
:playsinline="true"
webkit-playsinline=""
controls
x5-video-player-fullscreen="true"
x5-playsinline
@play="onPlayerPlay($event)"
style="object-fit:fill;" />
js代码如下:
export default {
data () {
return {
videoOptions: {
live: true,
autoplay: true,
fluid: true,
muted: true, // 默认情况下将会消除任何音频。 //**关键问题** ios开启静音才能自动播放
notSupportedMessage: '暂时无法播放',
aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true // 全屏按钮
},
techOrder: ['flash'],
flash: {
hls: { withCredentials: false },
swf: SWF_URL // 引入静态文件swf
},
sources: [{ // 流配置,数组形式,会根据兼容顺序自动切换
type: 'rtmp/flv',
src: 'rtmp://192.168.50.123:1231/live/2' // 这是芒果TV现场直播视频,地址是可以用的,最后需要替换成后端给的项目地址
}]
}
}
},
computed: {
playsinline () {
// 播放之后关闭静音
return this.isIos();
},
},
mounted () {
this.$nextTick(() => {
this.$refs.videoPlayer.player
});
},
destroyed () {
this.$refs.videoPlayer.dispose
},
methods: {
//播放回调
onPlayerPlay (player) {
console.log("player play!", player);
this.title = false
},
},
components: { videoPlayer }
}
</script>
techOrder: ['flash'],
flash: {
hls: { withCredentials: false },
swf: SWF_URL // 引入静态文件swf
},
这里配置的是flash组件
sources: [{ // 流配置,数组形式,会根据兼容顺序自动切换
type: 'rtmp/flv',
src: 'rtmp://192.168.50.243:1935/live/2' // 这是芒果TV现场直播视频,地址是可以用的,最后需要替换成后端给的项目地址
}]
在这里的type,选择的既是前端vue-video-player插件接收的格式,需与后端处理推流过来的格式一致,src既是访问数据的地址相较于get请求,
src: 'rtmp://*********' //星号中输入的则是你自己的地址
rtmp推流方式,类似于直播,可以支持回放等操作,而且相较于其他方式,ftmp比较顺畅也延时相较也很低,经测试在局域网中运行是几乎没有延时,在公网运行延时稍大,但是这种方式需要flash组件的加持,由于谷歌等一些浏览器取消了对flash组件的加持,所有到时很多浏览器无法接受,目前所能用到的方式只有找支付flash组件的浏览器进行展示,这个问题还没解决!!如果广大网友有解决办法可以试着分享!!!一起探究!