소스 검색

视频加载优化

lilei 4 년 전
부모
커밋
26d44ea66d

+ 2 - 2
App.vue

@@ -1,7 +1,7 @@
 <script>
-	const uat_URL = 'https://aitour.test.zyucgj.com/at-employee/' // 预发布
+	// const uat_URL = 'https://aitour.test.zyucgj.com/at-employee/' // 预发布
 	// const uat_URL = 'http://192.168.16.100:9102/at-employee/' // 本地
-	const pro_URL = 'https://aitour.zyucgj.com/at-employee/'  // 生产
+	const uat_URL = 'https://aitour.zyucgj.com/at-employee/'  // 生产
 	const buildType = 0 // 打包环境对应类型,1 生产 0 预发布
 	const buildURL = buildType ? pro_URL : uat_URL // 打包后实际对应的url
 	const envText = ['预发布环境','生产环境']

+ 11 - 0
hybrid/html/css/styles.css

@@ -173,6 +173,17 @@ body {
 	line-height: 240px;
 	text-align: center;
 }
+.videoPlay .videoloading{
+	position: absolute;
+	width: 100px;
+	height: 100px;
+	margin-left: -50px;
+	margin-top: -50px;
+	top: 50%;
+	left: 50%;
+	z-index: 8888;
+	text-align: center;
+}
 .videoPlay .control-yt, .videoPlay .control-yt-close {
   position: absolute;
   right: 15px;

+ 17 - 4
hybrid/html/ddvideo.html

@@ -30,6 +30,10 @@
 				<div v-show="showYtbtns" @click="kzYt(2)" class="ytBtns yt-right"></div>
 				<div v-show="showYtbtns" @click="kzYt(3)" class="ytBtns yt-top"></div>
 				<div v-show="showYtbtns" @click="kzYt(4)" class="ytBtns yt-bottom"></div>
+				<!-- 加载条 -->
+				<div v-if="showVideoLoading" class="videoloading">
+					<a-spin size="large" tip="加载中..."/>
+				</div>
 				<!-- 播放器 -->
 				<div class="prism-player" id="player-con"></div>
 			</div>
@@ -160,6 +164,7 @@
 				el: '#app',
 				data: {
 					xdType: 'video', // 巡店类型
+					showVideoLoading: false, // 视频加载进度
 					player: null, // 播放器对象
 					videoStatus: false, // 获取视频失败
 					videoPlayerStatus: '', // 视频播放状态
@@ -232,10 +237,14 @@
 						// 重置播放器
 						this.showYt = false
 						this.showYtbtns = false
+						this.showVideoLoading = true
 						if (this.player) {
-							this.player.dispose()
+							// this.player.dispose()
+							// document.getElementById('player-con').innerHTML = ""
+							this.player.loadByUrl(url)
+						}else{
+							this.videoInit(url)
 						}
-						this.videoInit(url)
 					},
 					// 获取视频地址失败
 					getVideoUrlError(err){
@@ -251,10 +260,11 @@
 							'source': videoSrc,
 							'width': '100%',
 							'height': '240px',
-							'autoplay': false,
+							'autoplay': true,
 							'isLive': true,
 							'rePlay': true,
-							'playsinline': true,
+							'playsinline': false,
+							'showBuffer': true,
 							'preload': true,
 							'language': 'zh-cn',
 							'useH5Prism': true,
@@ -305,11 +315,14 @@
 						})
 						// 控制栏
 						_this.player.on('playing', function() {
+							console.log('playing')
 							// _this.showYt = true
 							_this.videoPlayerStatus = 'playing'
+							_this.showVideoLoading = false
 						})
 						_this.player.on('error', function(e) {
 							console.log(JSON.stringify(e), 'error')
+							_this.player.loadByUrl(videoSrc)
 						})
 						// 全屏时设置横屏
 						_this.player.on('requestFullScreen', function(e) {

+ 23 - 7
hybrid/html/video.html

@@ -30,6 +30,10 @@
 				<div v-show="showYtbtns" @click="kzYt(2)" class="ytBtns yt-right"></div>
 				<div v-show="showYtbtns" @click="kzYt(3)" class="ytBtns yt-top"></div>
 				<div v-show="showYtbtns" @click="kzYt(4)" class="ytBtns yt-bottom"></div>
+				<!-- 加载条 -->
+				<div v-if="showVideoLoading" class="videoloading">
+					<a-spin size="large" tip="加载中..."/>
+				</div>
 				<!-- 播放器 -->
 				<div class="prism-player" id="player-con"></div>
 			</div>
@@ -194,6 +198,7 @@
 				el: '#app',
 				data: {
 					xdType: 'video', // 巡店类型
+					showVideoLoading: false, // 视频加载进度
 					videoStatus: false, // 获取视频失败
 					player: null, // 播放器对象
 					videoPlayerStatus:'',// 视频播放状态
@@ -288,10 +293,14 @@
 						// 重置播放器
 						this.showYt = false
 						this.showYtbtns = false
+						this.showVideoLoading = true
 						if(this.player){
-							this.player.dispose()
+							// this.player.dispose()
+							// document.getElementById('player-con').innerHTML = ""
+							this.player.loadByUrl(url)
+						}else{
+							this.videoInit(url)
 						}
-						this.videoInit(url)
 					},
 					// 获取视频地址失败
 					getVideoUrlError(err){
@@ -307,17 +316,19 @@
 							'source': videoSrc,
 							'width': '100%',
 							'height': '240px',
-							'autoplay': false,
+							'autoplay': true,
 							'isLive': true,
 							'rePlay': true,
-							'playsinline': true,
-							'preload': true,
+							'playsinline': false,
+							'showBuffer': true,
+							'preload': false,
 							'language': 'zh-cn',
 							'useH5Prism': true,
 							'extraInfo': {
 								'crossOrigin': 'anonymous'
 							},
-							'skinLayout': [{
+							'skinLayout': [
+								{
 									'name': 'bigPlayButton',
 									'align': 'cc'
 								},
@@ -328,7 +339,8 @@
 									'y': 0
 								},
 								{
-									'name': 'infoDisplay'
+									'name': 'infoDisplay',
+									'align': 'cc'
 								},
 								{
 									'name': 'controlBar',
@@ -359,13 +371,17 @@
 						}, function(player) {
 							_this.sendMsg('message', 'The player is created')
 						})
+						
 						// 控制栏
 						_this.player.on('playing', function() {
+							console.log('playing')
 							// _this.showYt = true
 							_this.videoPlayerStatus = 'playing'
+							_this.showVideoLoading = false
 						})
 						_this.player.on('error', function(e) {
 							console.log(JSON.stringify(e), 'error')
+							_this.player.loadByUrl(videoSrc)
 						})
 						// 全屏时设置横屏
 						_this.player.on('requestFullScreen', function(e) {

+ 1 - 1
pages/shopTour/shopTour.vue

@@ -309,7 +309,7 @@ export default {
 		getStoreVideoUrl(item) {
 			let _this = this
 			getVideoUrl({ streamId: item.streamId, outProtocol: 'hls' }).then(res => {
-				console.log(res);
+				console.log(res,'获取视频地址');
 				if (res.status == 200 && res.data) {
 					this.wv.evalJS("vm.getVideoUrlSuccess('" + res.data.url + "')");
 				} else {

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
unpackage/dist/dev/app-plus/app-service.js


+ 35 - 7
unpackage/dist/dev/app-plus/hybrid/html/video.html

@@ -30,6 +30,10 @@
 				<div v-show="showYtbtns" @click="kzYt(2)" class="ytBtns yt-right"></div>
 				<div v-show="showYtbtns" @click="kzYt(3)" class="ytBtns yt-top"></div>
 				<div v-show="showYtbtns" @click="kzYt(4)" class="ytBtns yt-bottom"></div>
+				<!-- 加载条 -->
+				<div v-if="showVideoLoading" class="videoloading">
+					<a-spin size="large" tip="加载中..."/>
+				</div>
 				<!-- 播放器 -->
 				<div class="prism-player" id="player-con"></div>
 			</div>
@@ -194,6 +198,7 @@
 				el: '#app',
 				data: {
 					xdType: 'video', // 巡店类型
+					showVideoLoading: false, // 视频加载进度
 					videoStatus: false, // 获取视频失败
 					player: null, // 播放器对象
 					videoPlayerStatus:'',// 视频播放状态
@@ -288,10 +293,14 @@
 						// 重置播放器
 						this.showYt = false
 						this.showYtbtns = false
+						this.showVideoLoading = true
 						if(this.player){
-							this.player.dispose()
+							// this.player.dispose()
+							// document.getElementById('player-con').innerHTML = ""
+							this.player.loadByUrl(url)
+						}else{
+							this.videoInit(url)
 						}
-						this.videoInit(url)
 					},
 					// 获取视频地址失败
 					getVideoUrlError(err){
@@ -307,17 +316,19 @@
 							'source': videoSrc,
 							'width': '100%',
 							'height': '240px',
-							'autoplay': false,
+							'autoplay': true,
 							'isLive': true,
 							'rePlay': true,
-							'playsinline': true,
-							'preload': true,
+							'playsinline': false,
+							'showBuffer': true,
+							'preload': false,
 							'language': 'zh-cn',
 							'useH5Prism': true,
 							'extraInfo': {
 								'crossOrigin': 'anonymous'
 							},
-							'skinLayout': [{
+							'skinLayout': [
+								{
 									'name': 'bigPlayButton',
 									'align': 'cc'
 								},
@@ -328,7 +339,8 @@
 									'y': 0
 								},
 								{
-									'name': 'infoDisplay'
+									'name': 'infoDisplay',
+									'align': 'cc'
 								},
 								{
 									'name': 'controlBar',
@@ -359,13 +371,29 @@
 						}, function(player) {
 							_this.sendMsg('message', 'The player is created')
 						})
+						
 						// 控制栏
+						_this.player.on('ready', function(e) {
+							console.log('ready')
+						})
+						_this.player.on('play', function(e) {
+							console.log('play')
+						})
+						_this.player.on('canplay', function(e) {
+							console.log('canplay')
+						})
 						_this.player.on('playing', function() {
+							console.log('playing')
 							// _this.showYt = true
 							_this.videoPlayerStatus = 'playing'
+							_this.showVideoLoading = false
+						})
+						_this.player.on('waiting', function(e) {
+							console.log('waiting')
 						})
 						_this.player.on('error', function(e) {
 							console.log(JSON.stringify(e), 'error')
+							_this.player.loadByUrl(videoSrc)
 						})
 						// 全屏时设置横屏
 						_this.player.on('requestFullScreen', function(e) {

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.