小方协助修复视频播放

manifest.json

@@ -133,7 +133,7 @@
             "mode" : "hash"
         },
         "devServer" : {
-            "https" : false
+            "https" : true
         },
         "template" : "",
         "sdkConfigs" : {

package-lock.json

@@ -4,6 +4,70 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/runtime": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/download/@babel/runtime-7.16.7.tgz",
+      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@videojs/http-streaming": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmmirror.com/@videojs/http-streaming/download/@videojs/http-streaming-2.12.0.tgz",
+      "integrity": "sha512-vdQA0lDYBXGJqV2T02AGqg1w4dcgyRoN+bYG+G8uF4DpCEMhEtUI0BA4tRu4/Njar8w/9D5k0a1KX40pcvM3fA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "3.0.4",
+        "aes-decrypter": "3.1.2",
+        "global": "^4.4.0",
+        "m3u8-parser": "4.7.0",
+        "mpd-parser": "0.19.2",
+        "mux.js": "5.14.1",
+        "video.js": "^6 || ^7"
+      }
+    },
+    "@videojs/vhs-utils": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@videojs/vhs-utils/download/@videojs/vhs-utils-3.0.4.tgz",
+      "integrity": "sha1-4lPuzY6TGPdn51IBDSE1h/lLsDo=",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      }
+    },
+    "@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.nlark.com/@videojs/xhr/download/@videojs/xhr-2.6.0.tgz",
+      "integrity": "sha1-zYl+CtVPr0l5YbzOP6FtwVomu4A=",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
+    "@xmldom/xmldom": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/download/@xmldom/xmldom-0.7.5.tgz",
+      "integrity": "sha1-CfpR41bQfQviAGQrDk+R2ObdQI0="
+    },
+    "aes-decrypter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.nlark.com/aes-decrypter/download/aes-decrypter-3.1.2.tgz",
+      "integrity": "sha1-NUVUb46fa4eGQDOaJC7+Ihunp8s=",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.0",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.nlark.com/dom-walk/download/dom-walk-0.1.2.tgz",
+      "integrity": "sha1-DFSL7wSPTR8qlySQAiNgYNqj/YQ="
+    },
     "echarts": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.0.2.tgz",
@@ -13,21 +77,154 @@
         "zrender": "5.0.4"
       }
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.nlark.com/global/download/global-4.4.0.tgz",
+      "integrity": "sha1-PnsQUXkAajI+1xqvyj6cV6XMZAY=",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/individual/download/individual-2.0.0.tgz",
+      "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+    },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.nlark.com/is-function/download/is-function-1.0.2.tgz",
+      "integrity": "sha1-Twl/MKv2762smDOxfKXcA/gUTgg="
+    },
     "jweixin-module": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/jweixin-module/-/jweixin-module-1.6.0.tgz",
       "integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
     },
+    "keycode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/keycode/download/keycode-2.2.1.tgz",
+      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+    },
+    "m3u8-parser": {
+      "version": "4.7.0",
+      "resolved": "https://registry.nlark.com/m3u8-parser/download/m3u8-parser-4.7.0.tgz?cache=0&sync_timestamp=1621435940345&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fm3u8-parser%2Fdownload%2Fm3u8-parser-4.7.0.tgz",
+      "integrity": "sha1-4B6M4TYJit4bFO5pHqIPxNxgq/Y=",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.0",
+        "global": "^4.4.0"
+      }
+    },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.nlark.com/min-document/download/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
+    "mpd-parser": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmmirror.com/mpd-parser/download/mpd-parser-0.19.2.tgz",
+      "integrity": "sha1-aGEeZTzfLMHpBoiCXEoSm3+QB+A=",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.2",
+        "@xmldom/xmldom": "^0.7.2",
+        "global": "^4.4.0"
+      }
+    },
     "mpvue-echarts": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/mpvue-echarts/-/mpvue-echarts-0.3.2.tgz",
       "integrity": "sha512-KULGS1DOMNhXu3nBkBv6BtmnqjyHLc+2Dur7eW+2s2aic1NCOygglCMmAmMEU6/TGSR67ttFA2NYxXPUYbNhWQ=="
     },
+    "mux.js": {
+      "version": "5.14.1",
+      "resolved": "https://registry.npmmirror.com/mux.js/download/mux.js-5.14.1.tgz",
+      "integrity": "sha1-IJWD9FQlXZui/xu2GtWmhnz2GHg=",
+      "requires": {
+        "@babel/runtime": "^7.11.2"
+      }
+    },
+    "pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/pkcs7/download/pkcs7-1.0.4.tgz",
+      "integrity": "sha1-YJC55xFg2r9pIJ1xnLr6U4sAocs=",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmmirror.com/process/download/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+    },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.nlark.com/rust-result/download/rust-result-1.0.0.tgz",
+      "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.nlark.com/safe-json-parse/download/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "tslib": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
       "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
     },
+    "url-toolkit": {
+      "version": "2.2.3",
+      "resolved": "https://registry.nlark.com/url-toolkit/download/url-toolkit-2.2.3.tgz?cache=0&sync_timestamp=1625914559846&other_urls=https%3A%2F%2Fregistry.nlark.com%2Furl-toolkit%2Fdownload%2Furl-toolkit-2.2.3.tgz",
+      "integrity": "sha1-ePqQEhWrusNBggZpMiICebgEUis="
+    },
+    "video.js": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmmirror.com/video.js/download/video.js-7.17.0.tgz",
+      "integrity": "sha512-8RbLu9+Pdpep9OTPncUHIvZXFgn/7hKdPnSTE/lGSnlFSucXtTUBp41R7NDwncscMLQ0WgazUbmFlvr4MNWMbA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "2.12.0",
+        "@videojs/vhs-utils": "^3.0.3",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "3.1.2",
+        "global": "^4.4.0",
+        "keycode": "^2.2.0",
+        "m3u8-parser": "4.7.0",
+        "mpd-parser": "0.19.2",
+        "mux.js": "5.14.1",
+        "safe-json-parse": "4.0.0",
+        "videojs-font": "3.2.0",
+        "videojs-vtt.js": "^0.15.3"
+      }
+    },
+    "videojs-font": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/videojs-font/download/videojs-font-3.2.0.tgz",
+      "integrity": "sha1-ISydP05Ow/pzRRZ9ZDFq3TXpIjI="
+    },
+    "videojs-vtt.js": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npm.taobao.org/videojs-vtt.js/download/videojs-vtt.js-0.15.3.tgz",
+      "integrity": "sha1-hCYDk7eUh/zxldk3L4Etf6uDqZM=",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "zrender": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.0.4.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "echarts": "^5.0.2",
     "jweixin-module": "^1.6.0",
-    "mpvue-echarts": "^0.3.2"
+    "mpvue-echarts": "^0.3.2",
+    "video.js": "^7.17.0"
   }
 }

pages/index/index.vue

@@ -194,9 +194,6 @@
 		onLoad: function(option) {
 		
 			if (option.op) {
-				// alert('op')
-				// alert(option.op)
-				// 首页数据渲染
 				this.getData();
 			
 			} else {

pages/videoDetail/videoDetail.vue

@@ -42,34 +42,42 @@
 				<text class="cuIcon-titles margin-right-xs"></text>
 				视频
 			</view>
-			<view class="padding-lr padding-bottom-lg ">
+			<view class="padding-lr padding-bottom-lg video-js" ref="video"
+				style="width: 95%; margin: 0 auto; height: 250px;">
 
-				<video id="myVideo" :src="videoUrl" style="width:100%" loop="loop" autoplay="autoplay"></video>
+				<!-- <video ref="myVideo" :src="videoUrl" style="width:100%" loop="loop" autoplay="autoplay"></video> -->
 
-				      <!--  <view class="video-js" ref="video" style="text-align:center;width:100%;height:400rpx">  
+				<!--  <view class="video-js" ref="video" style="text-align:center;width:100%;height:400rpx">  
 				
 				        </view>  -->
-				
+
+				<!-- <video id="example_video_1" style="width:100%" class="video-js vjs-default-skin" controls preload="none"
+					width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png">
+					<source :src="videoUrl" type="application/x-mpegURL">
+				</video> -->
+
 			</view>
 		</view>
 		<!-- 处理状态end -->
 
 	</view>
 </template>
-
+<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
 <script>
+	import Videojs from 'video.js'
+	import 'video.js/dist/video-js.min.css'
+
 	export default {
 		data() {
 			return {
 				videoDetail: '',
-				videoUrl:""
-
+				videoUrl: "",
+				player: '',
+				video: '',
+				// VideoJs: null,
 			}
 		},
-		 onReady() {  
-	     
-		        },  
-
+		onReady() {},
 		onLoad: function(option) {
 
 
@@ -77,22 +85,23 @@
 			console.log(option.deviceCode)
 			this.companyCode = option.companyCode
 			this.deviceType = option.deviceType
-			this.videoUrl = 'http://47.103.74.123/hls/'+option.deviceCode+'.m3u8';
+			// this.videoUrl = 'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'
+			// this.videoUrl = 'http://videocdn.didano.com/school765class0channelId2761namedingdangm/playlist.m3u8'
+			// this.videoUrl = 'https://iot.usky.cn/hls/' + option.deviceCode + '.m3u8';
+			this.videoUrl = 'http://47.103.74.123/hls/' + option.deviceCode + '.m3u8';
+			console.log(this.videoUrl)
 			this.getDeviceDetail({
 				"companyCode": option.companyCode,
 				"deviceType": option.deviceType,
 				"deviceCode": option.deviceCode
 			})
-			
-			
-			
-			
 		},
 
 
 		methods: {
-
 			async getDeviceDetail(ming = {}) {
+				let that = this;
+
 				const res = await this.$myRequest({
 					url: 'OperationMonitoring/getMonitoringScreen',
 					data: ming
@@ -100,16 +109,91 @@
 				console.log(res.data.data[0])
 				this.videoDetail = res.data.data[0]
 
+				setTimeout(() => {
+					let video = document.createElement('video');
+					video.id = 'video';
+					video.style = 'width: 100%; height: 100%;';
+					video.controls = true;
+					video.preload = "auto"
+					// video.autoplay = 'autoplay'
+					video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
+					video.setAttribute('webkit-playsinline', true);
+					video.setAttribute('custom-cache', false)//禁用第三方缓存加载
+					//这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
+					// video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
+					let source = document.createElement('source');
+					// source.src = 'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'
+					// source.src = 'http' + this.videoUrl.split('https')[1]
+					source.src = this.videoUrl
+					// source.src = './12/C60389215.m3u8'
+					// console.log(source.src)
+					source.type = 'application/x-mpegURL';
+					video.appendChild(source);
+					this.$refs.video.$el.appendChild(video);
+
+					this.player = Videojs('video', {
+						bigPlayButton: true, //是否显示播放按钮
+						poster: '', // 视频封面图地址
+						title: '4564564',
+						playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+						autoDisable: true,
+						preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
+						language: 'zh-CN',
+						fluid: true, // 自适应宽高
+						muted: false, //  是否静音
+						aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+						controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
+						autoplay: false, //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
+						loop: true, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
+						screenshot: true,
+						controlBar: {
+							volumePanel: { //声音样式
+								inline: false // 不使用水平方式
+							},
+							timeDivider: true, // 时间分割线
+							durationDisplay: true, // 总时间
+							progressControl: true, // 进度条
+							remainingTimeDisplay: true, //当前以播放时间
+							fullscreenToggle: true, //全屏按钮
+							pictureInPictureToggle: true, //画中画
+						}
+					}, function() {
+						// this.play()
+						// 播放 this.play()
+						// 停止 – video没有stop方法，可以用pause 暂停获得同样的效果
+						// 暂停 this.pause()
+						// 销毁 this.dispose()
+						// 监听 this.on(‘click‘,fn)
+						// 触发事件this.trigger(‘dispose‘)
+
+						this.on('error', function(err) { //请求数据时遇到错误
+							console.log("请求数据时遇到错误", err)
+						});
+						this.on('stalled', function(stalled) { //网速失速
+							console.log("网速失速", stalled)
+						});
+						this.on('play', function() { //开始播放
+							console.log("开始播放")
+						});
+						this.on('pause', function() { //暂停
+							console.log("暂停")
+						});
+						// this.on('timeupdate', function(timeupdate) {
+						// 	console.log(timeupdate)
+						// })
+					});
+				}, 1000)
 			},
 		}
 	}
 </script>
 
 <style lang="scss">
-
-
-
-
-
-
+	/deep/.vjs-big-play-button {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 90px;
+		margin: 0 auto;
+	}
 </style>