推文视频显示和优化。

.env.development

@@ -3,9 +3,8 @@ ENV = 'development'
 
 # base api
 VUE_APP_BASE_API = '/mhotel'
-# VUE_APP_BASE_API = 'http://www.xn--gmq052a5d255v.com/hotelReservation/mhotel'
+# VUE_APP_BASE_API = 'https://www.靖安人家.com/hotelReservation/mhotel'
 # VUE_APP_BASE_API = 'https://chtech.ncjti.edu.cn/hotelReservation/mhotel'
-# VUE_APP_BASE_API = 'http://101.42.162.31/hotelReservation/mhotel'
 
-VUE_APP_BASE_FILE = 'https://chtech.ncjti.edu.cn/hotelReservation/fileload'
-# VUE_APP_BASE_FILE = 'http://101.42.162.31/hotelReservation/fileload'
+
+VUE_APP_BASE_FILE = 'https://chtech.ncjti.edu.cn/hotelReservation/fileload'

.env.production

@@ -2,9 +2,7 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = 'http://www.xn--gmq052a5d255v.com/hotelReservation/mhotel'
-# VUE_APP_BASE_API = 'https://chtech.ncjti.edu.cn/hotelReservation/mhotel'
-# VUE_APP_BASE_API = 'http://101.42.162.31/hotelReservation/mhotel'
+VUE_APP_BASE_API = 'https://chtech.ncjti.edu.cn/hotelReservation/mhotel'
 
-VUE_APP_BASE_FILE = 'https://chtech.ncjti.edu.cn/hotelReservation/fileload'
-# VUE_APP_BASE_FILE = 'http://101.42.162.31/hotelReservation/fileload'
+
+VUE_APP_BASE_FILE = 'https://chtech.ncjti.edu.cn/hotelReservation/fileload'

package.json

@@ -27,6 +27,7 @@
 		"v-viewer": "^1.6.4",
 		"vue": "2.6.10",
 		"vue-router": "3.0.6",
+		"vue-video-player": "^5.0.1",
 		"vuex": "3.1.0"
 	},
 	"devDependencies": {

src/main.js

@@ -7,6 +7,12 @@ import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
 import '@/styles/index.scss' // global css
 
+// import { VueVideoPlayer } from "vue-video-player"
+import VueVideoPlayer from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+import 'vue-video-player/src/custom-theme.css'
+Vue.use(VueVideoPlayer)
+
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 

src/views/audited/index.vue

@@ -84,7 +84,7 @@
 					<viewer :images="fileInfoListImages">
 						<el-carousel :interval="3000" height="180px" width="500px" style="border-radius: 5px;">
 							<el-carousel-item v-for="item in approved_reject_Data.fileInfoList" :key="item.id">
-								<img :src="item.url" width="500" style="border-radius: 5px; cursor: pointer;">
+								<img :src="item" style="border-radius: 5px; cursor: pointer; width: 500px; height: 180px;">
 							</el-carousel-item>
 						</el-carousel>
 					</viewer>
@@ -122,7 +122,7 @@
 					<viewer :images="fileInfoListImages">
 						<div style="height: 110px; display: flex; justify-content: center; align-items: center;">
 							<img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
-								v-for="src in approved_reject_Data.fileInfoList" :src="src.url" :key="src.id">
+								v-for="src in approved_reject_Data.fileInfoList" :src="src" :key="src.id">
 						</div>
 					</viewer>
 				</div>
@@ -143,23 +143,35 @@
 		<!-- 推文 -->
 		<el-dialog title="推文/详情" custom-class="class-article-shenhe" :visible.sync="dialogArticleVisible" :close-on-click-modal="true"
 			:close-on-press-escape="true" @close="dialogArticleVisible = false">
-			<div style="display: flex; margin-bottom: 20px;">
-				<div style="text-align: right; font-weight: bold; width: 100px; ">标题：</div>
-				<div style="width: calc(100% - 100px); ">{{ approved_reject_Data.title }}</div>
-			</div>
-			<div style="display: flex; margin-bottom: 20px;">
-				<div style="text-align: right; font-weight: bold; width: 100px; height: 80px;">描述：</div>
-				<div style="width: calc(100% - 100px); height: 80px;">{{ approved_reject_Data.remark }}</div>
-			</div>
-			<div style="display: flex;">
-				<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频/图片：</div>
-				<div v-if="approved_reject_Data.fileInfoList.length > 0">
-					<viewer :images="fileInfoListImages">
-						<div style="height: 120px; display: flex; justify-content: center; align-items: center;">
-							<img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
-								v-for="src in approved_reject_Data.fileInfoList" :src="src.url" :key="src.id">
+			<div style="display: flex; flex-direction: column; max-height: 650px; overflow-y: auto;">
+				<div style="display: flex; margin-bottom: 20px;">
+					<div style="text-align: right; font-weight: bold; width: 100px; ">标题：</div>
+					<div style="width: calc(100% - 100px); ">{{ approved_reject_Data.title }}</div>
+				</div>
+				<div style="display: flex; margin-bottom: 20px;">
+					<div style="text-align: right; font-weight: bold; width: 100px; height: 80px;">描述：</div>
+					<div style="width: calc(100% - 100px); height: 80px;">{{ approved_reject_Data.remark }}</div>
+				</div>
+				<div style="display: flex; height: 130px;">
+					<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">图片：</div>
+					<div v-if="approved_reject_Data.fileInfoList.length > 0">
+						<viewer :images="fileInfoListImages">
+							<div style="height: 120px; display: flex; justify-content: center; align-items: center;">
+								<img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
+									v-for="src in approved_reject_Data.fileInfoList" :src="src" :key="src.id">
+							</div>
+						</viewer>
+					</div>
+				</div>
+				<div style="width: 750px; height: 450px; margin-top: 10px; display: flex;">
+					<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频：</div>
+					<div v-if="approved_reject_Data.videoList.length > 0">
+						<div v-for="(video, index) in approved_reject_Data.videoList" :key="index"
+							style="width: 650px; height: 340px; display: flex; justify-content: center; align-items: center;">
+							<video-player class="video-player vjs-custom-skin" :ref="'videoPlayer' + index" @play="onPlayerPlay($event)" :playsinline="true"
+								:options="video.playerOptions"></video-player>
 						</div>
-					</viewer>
+					</div>
 				</div>
 			</div>
 			<el-divider></el-divider>
@@ -177,6 +189,10 @@
 		getTableData
 	} from '@/api/audited'
 
+	import {
+		isEmpty
+	} from '@/js/common'
+
 	export default {
 		data() {
 			return {
@@ -211,7 +227,8 @@
 					workflowRemark: '',
 					remark: '',
 					coverImg: '',
-					fileInfoList: []
+					fileInfoList: [],
+					videoList: []
 				}, // 审核 驳回 参数
 				fileInofImage: [], // 缩略图
 				fileInfoListImages: [], // 滚动图片
@@ -233,8 +250,48 @@
 		},
 		mounted() {
 			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
+			document.addEventListener('fullscreenchange', this.handleFullScreenChange);
+		},
+		beforeDestroy() {
+			document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
 		},
 		methods: {
+			handleFullScreenChange() {
+				if (!document.fullscreenElement) {
+					// 退出全屏逻辑
+					this.playering.pause()
+				}
+			},
+			// 定义点击播放按钮，自动全屏化的方法
+			full(e) {
+				// 做兼容处理
+				if (e.requestFullscreen) {
+					e.requestFullscreen()
+				} else if (e.mozRequestFullScreen) {
+					e.mozRequestFullScreen()
+				} else if (e.msRequestFullscreen) {
+					e.msRequestFullscreen()
+				} else if (e.oRequestFullscreen) {
+					e.oRequestFullscreen()
+				} else if (e.webkitRequestFullscreen) {
+					e.webkitRequestFullScreen()
+				} else {
+					// var docHtml = document.documentElement;
+					// var docBody = document.body;
+					var videobox = document.getElementsByClassName('video-player')
+					var cssText = 'width:100%;height:100%;overflow:hidden;'
+					// docHtml.style.cssText = cssText;
+					// docBody.style.cssText = cssText;
+					videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
+					document.IsFullScreen = true
+				}
+			},
+			// 定义点击播放按钮，调用全屏化的方法
+			onPlayerPlay(player) {
+				// console.log('player play===>>>', player)
+				this.playering = player
+				this.full(player)
+			},
 			handleClickDetail(index, row) {
 				// console.log(row, index);
 				if (row.type == 1) {
@@ -254,11 +311,56 @@
 				this.$set(this.approved_reject_Data, 'coverImg', row.coverImg)
 				this.fileInofImage.push(row.coverImg)
 				this.$set(this.approved_reject_Data, 'workflowRemark', row.workflowRemark)
+				this.approved_reject_Data.videoList = []
 				if (row.fileInfoList.length > 0) {
+					var tmpImgList = []
 					for (var i = 0; i < row.fileInfoList.length; i++) {
-						this.fileInfoListImages.push(row.fileInfoList[i].url)
+						if (row.fileInfoList[i].url.toLowerCase().endsWith('.mp4')) {
+							this.approved_reject_Data.videoList.push({
+								playerOptions: {
+									playbackRates: [0.5, 0.8, 1.0, 1.25, 1.5, 1.75, 2.0], //播放速度
+									autoplay: false, // 如果true,浏览器准备好时开始回放。
+									muted: false, // 默认情况下将会消除任何音频。
+									loop: false, // 导致视频一结束就重新开始。
+									preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+									language: "zh-CN",
+									aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+									fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+									sources: [{
+										withCredentials: false,
+										type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+										src: row.fileInfoList[i].url,
+									}],
+									controls: true,
+									hls: true,
+									poster: "", // 你的封面地址
+									notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+									controlBar: {
+										progressControl: true,
+										currentTimeDisplay: true,
+										timeDivider: true,
+										durationDisplay: true,
+										remainingTimeDisplay: true,
+										fullscreenToggle: true, // 全屏按钮
+									},
+									flash: {
+										hls: {
+											withCredentials: false
+										}
+									},
+									html5: {
+										hls: {
+											withCredentials: false
+										}
+									}
+								}
+							})
+						} else if (!isEmpty(row.fileInfoList[i].url)) {
+							tmpImgList.push(row.fileInfoList[i].url)
+						}
 					}
-					this.$set(this.approved_reject_Data, 'fileInfoList', row.fileInfoList)
+					this.fileInfoListImages = tmpImgList
+					this.$set(this.approved_reject_Data, 'fileInfoList', tmpImgList)
 				} else {
 					this.$set(this.approved_reject_Data, 'fileInfoList', [])
 				}
@@ -556,6 +658,12 @@
 			height: calc(100% - 14px) !important;
 		}
 	}
+
+	.video-player {
+		height: 100%;
+		width: 100%;
+		margin: 0 auto;
+	}
 </style>
 
 <style>
@@ -570,7 +678,7 @@
 	}
 
 	.class-article-shenhe {
-		height: 450px !important;
+		height: 830px !important;
 		width: 880px !important;
 	}
 

src/views/myAgent/index.vue

@@ -60,13 +60,13 @@
 				</div>
 				<div style="margin: 0 10px; width: 500px;">
 					<div style="color: #000; margin: 0 0 10px 0; text-align: center; ">详情图：</div>
-					<el-carousel :interval="3000" height="180px" width="500px" style="border-radius: 5px;">
-						<el-carousel-item v-for="item in approved_reject_Data.fileInfoList" :key="item.id">
-							<viewer :images="fileInfoListImages">
-								<img :src="item.url" width="500" style="border-radius: 5px; cursor: pointer;">
-							</viewer>
-						</el-carousel-item>
-					</el-carousel>
+					<viewer :images="fileInfoListImages">
+						<el-carousel :interval="3000" height="180px" width="500px" style="border-radius: 5px;">
+							<el-carousel-item v-for="item in approved_reject_Data.fileInfoList" :key="item.id">
+								<img :src="item" style="border-radius: 5px; cursor: pointer; width: 500px; height: 180px;">
+							</el-carousel-item>
+						</el-carousel>
+					</viewer>
 				</div>
 			</div>
 			<div style="display: flex; margin-top: 20px;">
@@ -93,7 +93,7 @@
 					<viewer :images="fileInfoListImages">
 						<div style="display: flex; justify-content: center; align-items: center;">
 							<img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
-								v-for="src in approved_reject_Data.fileInfoList" :src="src.url" :key="src.id">
+								v-for="src in approved_reject_Data.fileInfoList" :src="src" :key="src.id">
 						</div>
 					</viewer>
 				</div>
@@ -106,32 +106,41 @@
 		<!-- 推文 -->
 		<el-dialog title="推文/主办" custom-class="class-article" :visible.sync="dialogArticleVisible" :close-on-click-modal="false" :close-on-press-escape="false"
 			@close="dialogArticleVisible = false">
-			<div style="display: flex; margin-bottom: 20px;">
-				<div style="text-align: right; font-weight: bold; width: 100px; ">标题：</div>
-				<div style="width: calc(100% - 100px); ">{{ approved_reject_Data.title }}</div>
-			</div>
-			<div style="display: flex; margin-bottom: 20px;">
-				<div style="text-align: right; font-weight: bold; width: 100px; height: 80px;">描述：</div>
-				<div style="width: calc(100% - 100px); height: 80px;">{{ approved_reject_Data.remark }}</div>
-			</div>
-			<div style="display: flex;">
-				<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频/图片：</div>
-				<div v-if="approved_reject_Data.fileInfoList.length > 0 || approved_reject_Data.videoList.length > 0">
-					<viewer :images="fileInfoListImages">
-						<div style="height: 120px; display: flex; justify-content: center; align-items: center;">
-							<img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
-								v-for="src in approved_reject_Data.fileInfoList" :src="src.url" :key="src.id">
-							<video width="180" height="" v-for="vd in approved_reject_Data.videoList" controls>
-								<source :src="vd" type="video/mp4"></source>
-							</video>
+			<div style="display: flex; flex-direction: column; max-height: 650px; overflow-y: auto;">
+				<div style="display: flex; margin-bottom: 20px;">
+					<div style="text-align: right; font-weight: bold; width: 100px; ">标题：</div>
+					<div style="width: calc(100% - 100px); ">{{ approved_reject_Data.title }}</div>
+				</div>
+				<div style="display: flex; margin-bottom: 20px;">
+					<div style="text-align: right; font-weight: bold; width: 100px; height: 80px;">描述：</div>
+					<div style="width: calc(100% - 100px); height: 80px;">{{ approved_reject_Data.remark }}</div>
+				</div>
+				<div style="display: flex; height: 130px;">
+					<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">图片：</div>
+					<div v-if="approved_reject_Data.fileInfoList.length > 0">
+						<viewer :images="fileInfoListImages">
+							<div style="height: 120px; display: flex; justify-content: center; align-items: center;">
+								<img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
+									v-for="src in approved_reject_Data.fileInfoList" :src="src" :key="src.id">
+							</div>
+						</viewer>
+					</div>
+				</div>
+				<div style="width: 750px; height: 450px; display: flex;">
+					<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频：</div>
+					<div v-if="approved_reject_Data.videoList.length > 0">
+						<div v-for="(video, index) in approved_reject_Data.videoList" :key="index"
+							style="width: 650px; height: 340px; display: flex; justify-content: center; align-items: center;">
+							<video-player class="video-player vjs-custom-skin" :ref="'videoPlayer' + index" @play="onPlayerPlay($event)" :playsinline="true"
+								:options="video.playerOptions"></video-player>
 						</div>
-					</viewer>
+					</div>
 				</div>
 			</div>
-			<p style="display: flex; justify-content: center;">
+			<div style="display: flex; justify-content: center; margin-top: 20px;">
 				<el-button type="danger" @click="handlerReject">驳 回</el-button>
 				<el-button type="primary" class="confirm-btn" @click="handlerPass">通 过</el-button>
-			</p>
+			</div>
 		</el-dialog>
 		<!-- 审核通过确认对话框 -->
 		<el-dialog title="提示" :center="true" :visible.sync="showPassDialog" width="280px" :show-close="false" :close-on-click-modal="false"
@@ -235,8 +244,49 @@
 		},
 		mounted() {
 			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
+
+			document.addEventListener('fullscreenchange', this.handleFullScreenChange);
+		},
+		beforeDestroy() {
+			document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
 		},
 		methods: {
+			handleFullScreenChange() {
+				if (!document.fullscreenElement) {
+					// 退出全屏逻辑
+					this.playering.pause()
+				}
+			},
+			// 定义点击播放按钮，自动全屏化的方法
+			full(e) {
+				// 做兼容处理
+				if (e.requestFullscreen) {
+					e.requestFullscreen()
+				} else if (e.mozRequestFullScreen) {
+					e.mozRequestFullScreen()
+				} else if (e.msRequestFullscreen) {
+					e.msRequestFullscreen()
+				} else if (e.oRequestFullscreen) {
+					e.oRequestFullscreen()
+				} else if (e.webkitRequestFullscreen) {
+					e.webkitRequestFullScreen()
+				} else {
+					// var docHtml = document.documentElement;
+					// var docBody = document.body;
+					var videobox = document.getElementsByClassName('video-player')
+					var cssText = 'width:100%;height:100%;overflow:hidden;'
+					// docHtml.style.cssText = cssText;
+					// docBody.style.cssText = cssText;
+					videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
+					document.IsFullScreen = true
+				}
+			},
+			// 定义点击播放按钮，调用全屏化的方法
+			onPlayerPlay(player) {
+				// console.log('player play===>>>', player)
+				this.playering = player
+				this.full(player)
+			},
 			// 审核通过盖章动画效果
 			handlerCloseApprove() {
 				this.isLoaded_approve = false
@@ -330,21 +380,56 @@
 				this.$set(this.approved_reject_Data, 'coverImg', row.coverImg)
 				this.fileInofImage.push(row.coverImg)
 				this.$set(this.approved_reject_Data, 'workflowRemark', row.workflowRemark)
+				this.approved_reject_Data.videoList = []
 				if (row.fileInfoList.length > 0) {
 					var tmpImgList = []
-					var tmpVideoList = []
 					for (var i = 0; i < row.fileInfoList.length; i++) {
 						if (row.fileInfoList[i].url.toLowerCase().endsWith('.mp4')) {
-							tmpVideoList.push(row.fileInfoList[i].url)
+							this.approved_reject_Data.videoList.push({
+								playerOptions: {
+									playbackRates: [0.5, 0.8, 1.0, 1.25, 1.5, 1.75, 2.0], //播放速度
+									autoplay: false, // 如果true,浏览器准备好时开始回放。
+									muted: false, // 默认情况下将会消除任何音频。
+									loop: false, // 导致视频一结束就重新开始。
+									preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+									language: "zh-CN",
+									aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+									fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+									sources: [{
+										withCredentials: false,
+										type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+										src: row.fileInfoList[i].url,
+									}],
+									controls: true,
+									hls: true,
+									poster: "", // 你的封面地址
+									notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+									controlBar: {
+										progressControl: true,
+										currentTimeDisplay: true,
+										timeDivider: true,
+										durationDisplay: true,
+										remainingTimeDisplay: false,
+										fullscreenToggle: true, // 全屏按钮
+									},
+									flash: {
+										hls: {
+											withCredentials: false
+										}
+									},
+									html5: {
+										hls: {
+											withCredentials: false
+										}
+									}
+								}
+							})
 						} else if (!isEmpty(row.fileInfoList[i].url)) {
 							tmpImgList.push(row.fileInfoList[i].url)
 						}
-						this.fileInfoListImages = tmpImgList
 					}
+					this.fileInfoListImages = tmpImgList
 					this.$set(this.approved_reject_Data, 'fileInfoList', tmpImgList)
-					this.$set(this.approved_reject_Data, 'videoList', tmpVideoList)
-					console.log(tmpImgList);
-					console.log(tmpVideoList);
 				} else {
 					this.$set(this.approved_reject_Data, 'fileInfoList', [])
 				}
@@ -682,6 +767,12 @@
 			z-index: -1;
 		}
 	}
+
+	.video-player {
+		height: 100%;
+		width: 100%;
+		margin: 0 auto;
+	}
 </style>
 
 <style>
@@ -696,7 +787,7 @@
 	}
 
 	.class-article {
-		height: 430px !important;
+		height: 830px !important;
 		width: 880px !important;
 	}
 

vue.config.js

@@ -38,9 +38,9 @@ module.exports = {
 		},
 		proxy: {
 			[process.env.VUE_APP_BASE_API]: {
-				target: 'http://www.xn--gmq052a5d255v.com/hotelReservation/mhotel',
+				// target: 'https://www.靖安人家.com/hotelReservation/mhotel',
+				target: 'https://chtech.ncjti.edu.cn/hotelReservation/mhotel',
 				// target: 'http://101.42.162.31/mhotel',
-				// target: 'https://chtech.ncjti.edu.cn/hotelReservation/mhotel',
 				changeOrigin: true,
 				pathRewrite: {
 					['^' + process.env.VUE_APP_BASE_API]: ''