|
|
@@ -1,10 +1,9 @@
|
|
|
<template>
|
|
|
<div class="video-player">
|
|
|
- <!-- <video ref="videoElement" class="video video-js vjs-default-skin" controls autoplay muted="true"
|
|
|
- @error="onVideoError" data-setup='{}'></video> -->
|
|
|
+ <video ref="videoElement" controls autoplay class="video" muted="true" @error="onVideoError"></video>
|
|
|
<!-- <videoPlayer v-show="videoType == 'rtmp'" :options="videoOptions" class="video videoPlayer" :playsinline="true" /> -->
|
|
|
<!-- <video v-show="videoType != 'rtmp'" ref="videoElement" controls autoplay class="video" muted="true" @error="onVideoError"></video> -->
|
|
|
- <video ref="videoElement" controls autoplay class="video video-js vjs-default-skin" muted="true" @error="onVideoError" data-setup='{}'></video>
|
|
|
+ <!-- <video ref="videoElement" controls autoplay crossorigin class="video video-js vjs-default-skin" muted="true" @error="onVideoError"></video> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -20,14 +19,14 @@
|
|
|
// console.warn("****videoPlayer1**",videoPlayer)
|
|
|
export default {
|
|
|
props: {
|
|
|
- videoUrl: {
|
|
|
- type: String,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- videoType: {
|
|
|
- type: String,
|
|
|
- default: 'hls', // 'hls' or 'flv'
|
|
|
- },
|
|
|
+ // videoUrl: {
|
|
|
+ // type: String,
|
|
|
+ // required: true,
|
|
|
+ // },
|
|
|
+ // videoType: {
|
|
|
+ // type: String,
|
|
|
+ // default: 'hls', // 'hls' or 'flv'
|
|
|
+ // },
|
|
|
},
|
|
|
// components: {
|
|
|
// videoPlayer,
|
|
|
@@ -35,42 +34,35 @@
|
|
|
data() {
|
|
|
return {
|
|
|
videoSrc: '',
|
|
|
- // 视频播放
|
|
|
- videoOptions: {
|
|
|
- // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
|
|
- autoplay: true, //如果true,浏览器准备好时开始回放。
|
|
|
- muted: true, // 默认情况下将会消除任何音频。
|
|
|
- loop: true, // 导致视频一结束就重新开始。
|
|
|
- volume:0,
|
|
|
- preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
|
|
- language: 'zh-CN',
|
|
|
- aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
|
|
- techOrder: ['flash'], // 兼容顺序
|
|
|
- sources: [{
|
|
|
- // 流配置，数组形式，会根据兼容顺序自动切换
|
|
|
- type: 'rtmp/mp4',
|
|
|
- // src: 'rtmp://36.150.174.132:57935/oss/eHh4eFNfMjQ0ODQ1YmU5MTNkOjg1NTc5NTI2NDAwODI0ODUyODc?deviceId=xxxxS_244845be913d&expireTime=1744858930&playType=0', //拉流url
|
|
|
- src:'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp'
|
|
|
- }],
|
|
|
- poster: '', //你的封面地址
|
|
|
- // width: document.documentElement.clientWidth,
|
|
|
- notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
- controls:false,
|
|
|
- // flash: {
|
|
|
- // swf: '/node_modules/videojs-swf/dist/video-js.swf'
|
|
|
- // }
|
|
|
- // controlBar: {
|
|
|
- // timeDivider: true,
|
|
|
- // durationDisplay: true,
|
|
|
- // remainingTimeDisplay: false,
|
|
|
- // fullscreenToggle: true, //全屏按钮
|
|
|
- // },
|
|
|
+ videoType:'hls',
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ videoUrl() {
|
|
|
+ return this.$store.state.rtmpUrl
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ videoUrl:{
|
|
|
+ handler(val, oldVal){
|
|
|
+ if (val) {
|
|
|
+ let _url = val.split('?')[0];
|
|
|
+ if(_url.startsWith('rtmp')){
|
|
|
+ this.videoType = "rtmp"
|
|
|
+ }else if(_url.endsWith('.m3u8')){
|
|
|
+ this.videoType = "hls"
|
|
|
+ }else if(_url.endsWith('.flv')){
|
|
|
+ this.videoType = "flv"
|
|
|
+ }
|
|
|
+ this.initPlayer();
|
|
|
+ }
|
|
|
+ console.warn("***videoUrl***",this.videoType,val)
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
mounted() {
|
|
|
- this.initPlayer();
|
|
|
+
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
this.destroyPlayer();
|
|
|
@@ -97,29 +89,34 @@
|
|
|
} else if (this.videoType === 'rtmp') {
|
|
|
// this.videoOptions.sources[0].src = this.videoUrl;
|
|
|
videojs(video, {
|
|
|
- // autoplay: true, //如果true,浏览器准备好时开始回放。
|
|
|
- // muted: true, // 默认情况下将会消除任何音频。
|
|
|
- // loop: true, // 导致视频一结束就重新开始。
|
|
|
- // volume:0,
|
|
|
+ autoplay: true, //如果true,浏览器准备好时开始回放。
|
|
|
+ muted: true, // 默认情况下将会消除任何音频。
|
|
|
+ loop: false, // 导致视频一结束就重新开始。
|
|
|
+ crossorigin:'*',
|
|
|
techOrder: ['flash'],
|
|
|
sources: [{
|
|
|
- // src: this.videoUrl,
|
|
|
- src:'rtmp://ns8.indexforce.com/home/mystream',
|
|
|
- type: 'rtmp'
|
|
|
+ src: this.videoUrl,
|
|
|
+ // src:'rtmp://39.130.243.104:1935/oss/eHh4eFNfMjQ0ODQ1YmU0NmVmOjU1OTQ4NTU1NTgwNTc4MjA2ODA?deviceId=xxxxS_244845be46ef&expireTime=1744884926&playType=0',
|
|
|
+ type: 'rtmp/mp4'
|
|
|
}],
|
|
|
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
controls:false,
|
|
|
});
|
|
|
+ videojs.hook('error', function(player, err) {
|
|
|
+ console.warn("***beforeerror***",err)
|
|
|
+ });
|
|
|
+ console.warn("***视频地址***",this.videoUrl)
|
|
|
} else {
|
|
|
console.error('不支持的播放格式');
|
|
|
}
|
|
|
},
|
|
|
destroyPlayer() {
|
|
|
const video = this.$refs.videoElement;
|
|
|
- if (this.videoType === 'hls' && Hls.isSupported()) {
|
|
|
+ console.warn("***destroyPlayer-视频地址***",this.videoType)
|
|
|
+ if (this.videoType === 'hls' && Hls && Hls.isSupported()) {
|
|
|
Hls.destroy();
|
|
|
}
|
|
|
- if (this.videoType === 'flv' && Flv.isSupported()) {
|
|
|
+ if (this.videoType === 'flv' && Flv && Flv.isSupported()) {
|
|
|
Flv.destroy();
|
|
|
}
|
|
|
if (this.videoType === 'rtmp') {
|
zjs_project