|
|
@@ -1,35 +1,31 @@
|
|
|
<template>
|
|
|
<div class="miniProgramVideoHls">
|
|
|
- <!--<p>{{webType?webType:'无'}}</p>-->
|
|
|
<p class="null-text" v-if="nullType">{{nullType}}</p>
|
|
|
<div class="video-max-box" v-if="buttonType&&!fullVideoType">
|
|
|
- <video
|
|
|
- v-for="(item,index) in videoList" :key="index"
|
|
|
- :id="item.cameraIndexCode" ref="hlsVideo"
|
|
|
- :width="item.width" :height="item.height"
|
|
|
- :src="item.url"
|
|
|
- controls
|
|
|
- controlsList="nodownload noplaybackrate"
|
|
|
- autoplay muted playsinline loop
|
|
|
- preload="auto"
|
|
|
- webkit-playsinline
|
|
|
- x5-video-player-type="h5"
|
|
|
- x5-video-player-fullscreen="true"
|
|
|
- x5-video-orientation="portrait"
|
|
|
+ <video class="video-box" id="video" controls autoplay muted
|
|
|
+ v-for="(item,index) in videoList" :key="index"
|
|
|
+ :width="item.width" :height="item.height"
|
|
|
+ :id="item.cameraIndexCode" :ref="item.cameraIndexCode"
|
|
|
></video>
|
|
|
-
|
|
|
- <!--x5-video-orientation="landscape"-->
|
|
|
+ <!--<video-->
|
|
|
+ <!--ref="videoPlayer"-->
|
|
|
+ <!--class="video-box"-->
|
|
|
+ <!--v-for="(item,index) in videoList" :key="index"-->
|
|
|
+ <!--:src="item.url"-->
|
|
|
+ <!--:width="item.width" :height="item.height"-->
|
|
|
+ <!--preload="metadata"-->
|
|
|
+ <!--playsinline-->
|
|
|
+ <!--webkit-playsinline-->
|
|
|
+ <!--x5-playsinline>-->
|
|
|
+ <!--</video>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
|
|
|
+ import Hls from 'hls.js'
|
|
|
import { iotCameraFindByCondition } from "@/api/index";
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
- components: {
|
|
|
- mpegtsVideo,
|
|
|
- },
|
|
|
data () {
|
|
|
return {
|
|
|
buttonType: false,
|
|
|
@@ -42,8 +38,8 @@
|
|
|
//全屏视频参数
|
|
|
fullVideoProps:{},
|
|
|
fullVideoType:false,
|
|
|
- //浏览器类型
|
|
|
- webType:null,
|
|
|
+ hlsPlayers: {}, // 存储每个视频的Hls实例
|
|
|
+ errors: {} // 存储每个视频的错误状态
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
@@ -55,45 +51,7 @@
|
|
|
this.$set(this, 'height', height)
|
|
|
},
|
|
|
mounted(){
|
|
|
- // this.getUrl();
|
|
|
- let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
|
|
- if (userAgent.indexOf("iPhone") > -1) {
|
|
|
- this.$set(this,'webType','iPhone');
|
|
|
- }else if (userAgent.indexOf("Android") > -1) {
|
|
|
- this.$set(this,'webType','Android');
|
|
|
- }
|
|
|
- this.$set(this,'buttonType',true);
|
|
|
- if(this.webType == 'iPhone'){
|
|
|
- this.$set(this,'videoList',[
|
|
|
- {
|
|
|
- width:this.width, //(宽度:非必传-默认600)
|
|
|
- height:this.height, //(高度:非必传-默认338)
|
|
|
- url:"http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064/hls.m3u8",
|
|
|
- cameraIndexCode:1, //(ID:非必传-默认随机生成) //(视频地址:必传)
|
|
|
- },
|
|
|
- {
|
|
|
- width:this.width, //(宽度:非必传-默认600)
|
|
|
- height:this.height, //(高度:非必传-默认338)
|
|
|
- url:"http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064/hls.m3u8",
|
|
|
- cameraIndexCode:2, //(ID:非必传-默认随机生成) //(视频地址:必传)
|
|
|
- },
|
|
|
- ]);
|
|
|
- }else{
|
|
|
- this.$set(this,'videoList',[
|
|
|
- {
|
|
|
- width:this.width, //(宽度:非必传-默认600)
|
|
|
- height:this.height, //(高度:非必传-默认338)
|
|
|
- url:"http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064.live.mp4",
|
|
|
- cameraIndexCode:1, //(ID:非必传-默认随机生成) //(视频地址:必传)
|
|
|
- },
|
|
|
- {
|
|
|
- width:this.width, //(宽度:非必传-默认600)
|
|
|
- height:this.height, //(高度:非必传-默认338)
|
|
|
- url:"http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064.live.mp4",
|
|
|
- cameraIndexCode:2, //(ID:非必传-默认随机生成) //(视频地址:必传)
|
|
|
- },
|
|
|
- ]);
|
|
|
- }
|
|
|
+ this.getUrl();
|
|
|
},
|
|
|
methods:{
|
|
|
getUrl() {
|
|
|
@@ -128,8 +86,10 @@
|
|
|
let obj = {
|
|
|
page:'1',
|
|
|
pageSize:'4',
|
|
|
- protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
|
|
|
+ // protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
|
|
|
+ protocol:'wss',
|
|
|
streamType:1,
|
|
|
+ videoStreamType:'hls',
|
|
|
};
|
|
|
if(urlData.type == 1){
|
|
|
obj.buildId = urlData.buildId;
|
|
|
@@ -155,19 +115,24 @@
|
|
|
}else{
|
|
|
let list = [];
|
|
|
for(let i=0;i<response.data.records.length;i++){
|
|
|
- list.push(
|
|
|
- {
|
|
|
- width: this.width, //(宽度:非必传-默认600)
|
|
|
- height: this.height, //(高度:非必传-默认338)
|
|
|
- url: response.data.records[i].streamUrl,
|
|
|
- cameraIndexCode: response.data.records[i].deviceNo,
|
|
|
- }
|
|
|
- )
|
|
|
+ let obj = {
|
|
|
+ width: this.width, //(宽度:非必传-默认600)
|
|
|
+ height: this.height, //(高度:非必传-默认338)
|
|
|
+ cameraIndexCode: response.data.records[i].deviceNo,
|
|
|
+ };
|
|
|
+ if(response.data.records[i].streamUrl.indexOf('wss://') != -1){
|
|
|
+ obj.url = 'https://'+response.data.records[i].streamUrl.split("://")[1];
|
|
|
+ }else{
|
|
|
+ obj.url = response.data.records[i].streamUrl;
|
|
|
+ }
|
|
|
+ list.push(obj)
|
|
|
}
|
|
|
this.$set(this,'videoList',list)
|
|
|
+ self.$set(self, 'buttonType', true);
|
|
|
this.$nextTick(()=>{
|
|
|
setTimeout(function(){
|
|
|
- self.$set(self, 'buttonType', true);
|
|
|
+ // 组件挂载后初始化所有视频播放器
|
|
|
+ self.initVideoPlayers()
|
|
|
},1000);
|
|
|
})
|
|
|
}
|
|
|
@@ -176,6 +141,27 @@
|
|
|
this.$set(this,'nullType','参数异常,请联系管理员');
|
|
|
}
|
|
|
},
|
|
|
+ initVideoPlayers() {
|
|
|
+ let self = this;
|
|
|
+ for(let i=0;i<self.videoList.length;i++){
|
|
|
+ let url = self.videoList[i].url;
|
|
|
+ let video = document.getElementById(self.videoList[i].cameraIndexCode)
|
|
|
+ if (Hls.isSupported()) {
|
|
|
+ let hls = new Hls();
|
|
|
+ hls.loadSource(url);
|
|
|
+ hls.attachMedia(video);
|
|
|
+ hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
|
+ console.log('m3u8 加载成功，可以播放');
|
|
|
+ });
|
|
|
+ hls.on(Hls.Events.ERROR, function (e, data) {
|
|
|
+ console.error('hls.js 报错：', data);
|
|
|
+ });
|
|
|
+ } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
|
+ // iOS 原生支持
|
|
|
+ video.src = url;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
//乘法
|
|
|
accMul(arg1, arg2) {
|
|
|
var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
|
|
|
@@ -213,43 +199,43 @@
|
|
|
margin: 0 auto 10px;
|
|
|
display: inline-block
|
|
|
}
|
|
|
- video::-webkit-media-controls-play-button {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
- video::-webkit-media-controls-current-time-display {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
- video::-webkit-media-controls-time-remaining-display {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
- video::-webkit-media-controls-timeline {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
- video::-webkit-media-controls-mute-button {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
- video::-webkit-media-controls-volume-slider {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
- /*video::-webkit-media-controls-fullscreen-button {*/
|
|
|
+ /*video::-webkit-media-controls-play-button {*/
|
|
|
+ /*display: none !important;*/
|
|
|
+ /*}*/
|
|
|
+ /*video::-webkit-media-controls-current-time-display {*/
|
|
|
+ /*display: none !important;*/
|
|
|
+ /*}*/
|
|
|
+ /*video::-webkit-media-controls-time-remaining-display {*/
|
|
|
+ /*display: none !important;*/
|
|
|
+ /*}*/
|
|
|
+ /*video::-webkit-media-controls-timeline {*/
|
|
|
+ /*display: none !important;*/
|
|
|
+ /*}*/
|
|
|
+ /*video::-webkit-media-controls-mute-button {*/
|
|
|
+ /*display: none !important;*/
|
|
|
+ /*}*/
|
|
|
+ /*video::-webkit-media-controls-volume-slider {*/
|
|
|
+ /*display: none !important;*/
|
|
|
+ /*}*/
|
|
|
+ /*!*video::-webkit-media-controls-fullscreen-button {*!*/
|
|
|
+ /*!*display: none !important;*!*/
|
|
|
+ /*!*}*!*/
|
|
|
+ /*video::-webkit-media-controls-toggle-closed-captions-button {*/
|
|
|
+ /*display: none !important;*/
|
|
|
+ /*}*/
|
|
|
+ /*!* 隐藏画中画按钮（非标准） *!*/
|
|
|
+ /*video::-webkit-media-controls-picture-in-picture-button {*/
|
|
|
/*display: none !important;*/
|
|
|
/*}*/
|
|
|
- video::-webkit-media-controls-toggle-closed-captions-button {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
- /* 隐藏画中画按钮（非标准） */
|
|
|
- video::-webkit-media-controls-picture-in-picture-button {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
|
|
|
- /* 隐藏下载按钮（部分浏览器） */
|
|
|
- video::-internal-media-controls-download-button {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
+ /*!* 隐藏下载按钮（部分浏览器） *!*/
|
|
|
+ /*video::-internal-media-controls-download-button {*/
|
|
|
+ /*display: none !important;*/
|
|
|
+ /*}*/
|
|
|
|
|
|
- /* 移动端额外控制 */
|
|
|
- video {
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
- }
|
|
|
+ /*!* 移动端额外控制 *!*/
|
|
|
+ /*video {*/
|
|
|
+ /*-webkit-tap-highlight-color: transparent;*/
|
|
|
+ /*}*/
|
|
|
}
|
|
|
</style>
|
dedsudiyu