Home Explore Help
Register Sign In
zhengbingbing
/
XinXiangXLX_UI
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 734 Releases 0 Wiki
Browse Source

修改 知识库视频播放样式问题；

fanlongfei 6 years ago
parent
3bf322585a
commit
9b3033b07b
4 changed files with 31 additions and 35 deletions
Split View Show Diff Stats
  1. BIN
      CallCenterWeb.UI/img/MY_VIDEO_POSTER.jpg
  2. 1 0
      CallCenterWeb.UI/js/videojs/videojs-ie8.min.js
  3. 23 11
      CallCenterWeb.UI/zhiShiKu/template/playVideo.html
  4. 7 24
      CallCenterWeb.UI/zhiShiKu/template/seeDetail.html

BIN
CallCenterWeb.UI/img/MY_VIDEO_POSTER.jpg
View File


File diff suppressed because it is too large
+ 1 - 0
CallCenterWeb.UI/js/videojs/videojs-ie8.min.js


+ 23 - 11
CallCenterWeb.UI/zhiShiKu/template/playVideo.html
View File 

@@ -7,15 +7,20 @@
7 7 
 		<script src="../../Script/Common/huayi.load.js"></script>
8 8 
 		<script src="../../Script/Common/huayi.config.js"></script>
9 9 
 		<link href="../../js/videojs/video-js.min.css" rel="stylesheet" type="text/css" />
10 
-		<!-- <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet"> -->
11 10 
 		<!--[if lt IE 9]>
12 
-			<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
11 
+			<script src="../../js/videojs/videojs-ie8.min.js"></script>
13 12 
 		<![endif]-->
14 13 
 		<style type="text/css">
15 14 
 			.video-js {
16 
-				margin: 0 auto;
15 
+				width: 100%;
16 
+				height: 90%;
17 
+				left: 50%;
17 18 
 				top: 50%;
18 
-				margin-top: -135px;
19 
+				-webkit-transform: translate(-50%, -50%);
20 
+				-ms-transform: translate(-50%, -50%);
21 
+				-moz-transform: translate(-50%, -50%);
22 
+				transform: translate(-50%, -50%);
23 
+				text-align: center;
19 24 
 			}
20 25
21 26 
 			.video-js .vjs-big-play-button {
 
@@ -24,12 +29,16 @@
24 29 
 				margin-left: -1.5em;
25 30 
 				margin-top: -0.75em;
26 31 
 			}
32 
+
33 
+			.video-js .vjs-tech{
34 
+				height: 100%!important;
35 
+			}
27 36 
 		</style>
28 37 
 	</head>
29 38
30 39 
 	<body>
31 40 
 		<!-- 播放视频 -->
32 
-		<video id="playVideo" class="video-js" controls preload="auto" width="640" height="270" poster="MY_VIDEO_POSTER.jpg"
41 
+		<video id="playVideo" class="video-js" controls preload="auto" width="640" height="264" poster="../../img/MY_VIDEO_POSTER.jpg"
33 42 
 		 data-setup="{}">
34 43 
 			<!-- <source src="http://59.80.44.91/vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> -->
35 44 
 			<p class="vjs-no-js">
 
@@ -43,16 +52,19 @@
43 52 
 	<script>
44 53 
 		var token = $.cookie("token");
45 54 
 		var playUrl = helper.request.queryString("playUrl");
55 
+		var fileType = helper.request.queryString("fileType");
46 56
47 57 
 		$(function() {
48 58 
 			if (playUrl) {
49 
-				console.log(playUrl);
59 
+				playUrl = decodeURIComponent(playUrl);
60 
+				fileType = decodeURIComponent(fileType);
50 61 
 				var options = {
51 62 
 					preload: 'auto',
63 
+					playbackRates: [0.5, 1, 1.5, 2], // 倍速
52 64 
 					sources: [
53 65 
 						{
54 66 
 							src: playUrl,
55 
-							type: 'video/mp4'
67 
+							type: fileType
56 68 
 						},
57 69 
 						// {
58 70 
 						// 	src: 'http://59.80.44.91/vjs.zencdn.net/v/oceans.mp4',
 
@@ -66,15 +78,15 @@
66 78 
 				};
67 79
68 80 
 				var player = videojs('playVideo', options, function onPlayerReady() {
69 
-					videojs.log('Your player is ready!');
81 
+					// videojs.log('Your player is ready!');
70 82
71 83 
 					// In this context, `this` is the player that was created by Video.js.
72 84 
 					this.play();
73 85
74 86 
 					// How about an event listener?
75 
-					this.on('ended', function() {
76 
-						videojs.log('Awww...over so soon?!');
77 
-					});
87 
+					// this.on('ended', function() {
88 
+					// 	videojs.log('Awww...over so soon?!');
89 
+					// });
78 90 
 				});
79 91
80 92 
 			}

+ 7 - 24
CallCenterWeb.UI/zhiShiKu/template/seeDetail.html
View File 

@@ -8,8 +8,6 @@
8 8 
 		<link rel="stylesheet" href="../../css/init.css" />
9 9 
 		<link rel="stylesheet" href="../css/seeDetail.css" />
10 10 
 		<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
11 
-		<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
12 
-		<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
13 11 
 		<title>知识库查询</title>
14 12 
 	</head>
15 13 
 
@@ -40,7 +38,6 @@
40 38 
 		</table>
41 39 
 	</body>
42 40 
 	<script src="../../js/download/download.js"></script>
43 
-	<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
44 41 
 	<script>
45 42 
 		var token = $.cookie("token");
46 43 
 		var changeGetid = helper.request.queryString("changeGetid");
 
@@ -49,21 +46,6 @@
49 46 
 			if (changeGetid) {
50 47 
 				getChangeBox();
51 48 
 			}
52 
-
53 
-// 			var options = {};
54 
-//
55 
-// 			var player = videojs('my-player', options, function onPlayerReady() {
56 
-// 				videojs.log('Your player is ready!');
57 
-//
58 
-// 				// In this context, `this` is the player that was created by Video.js.
59 
-// 				this.play();
60 
-//
61 
-// 				// How about an event listener?
62 
-// 				this.on('ended', function() {
63 
-// 					videojs.log('Awww...over so soon?!');
64 
-// 				});
65 
-// 			});
66 
-
67 49 
 		});
68 50
69 51 
 		function getChangeBox() {
 
@@ -88,7 +70,7 @@
88 70 
 								var fileType = n.F_FileType.split("\/")[0];
89 71 
 								if (fileType === 'image') {
90 72 
 									$('<div class="img-box">' +
91 
-										'<span class="img_mask"><span onclick=downloadFile("'+ event + '","' + n.F_FileUrl + '","' + n.F_FileName + '","' + n.F_FileType +
73 
+										'<span class="img_mask"><span onclick=downloadFile("'+ n.F_FileUrl + '","' + n.F_FileName + '","' + n.F_FileType +
92 74 
 										'") title="点击下载"><i class="fa fa-download" aria-hidden="true"></i></span></span>' +
93 75 
 										'<img layer-src="' + n.F_FileUrl + '" src="' + n.F_FileUrl + '" alt="' + n.F_FileName +
94 76 
 										'" class="image-item" /><div>').appendTo("#fileList");
 
@@ -97,10 +79,10 @@
97 79 
 										'<span class="img_mask"><span href="javascript:;" onclick=downloadFile("' +  n.F_FileUrl + '","' + n.F_FileName +
98 80 
 										'","' + n.F_FileType +
99 81 
 										'") title="点击下载"><i class="fa fa-download" aria-hidden="true"></i></span></span>' +
100 
-										'<span class="img_filename" onclick="playVideo(\''+ n.F_FileUrl +'\')">' + n.F_FileName.split(".")[1] + '</span><div>').appendTo("#fileList");
82 
+										'<span class="img_filename" onclick="playVideo(\''+ n.F_FileUrl + '\' , \'' + n.F_FileType + '\')">' + n.F_FileName.split(".")[1] + '</span><div>').appendTo("#fileList");
101 83 
 								} else {
102 84 
 									$('<div class="img-box">' +
103 
-										'<span class="img_mask"><span href="javascript:;" onclick=downloadFile("'+ event + '","' +  n.F_FileUrl + '","' + n.F_FileName +
85 
+										'<span class="img_mask"><span href="javascript:;" onclick=downloadFile("' +  n.F_FileUrl + '","' + n.F_FileName +
104 86 
 										'","' + n.F_FileType +
105 87 
 										'") title="点击下载"><i class="fa fa-download" aria-hidden="true"></i></span></span>' +
106 88 
 										'<span class="img_filename">' + n.F_FileName.split(".")[1] + '</span><div>').appendTo("#fileList");
 
@@ -132,14 +114,15 @@
132 114 
 		/**
133 115 
 		 * 播放视频
134 116 
 		 * @playUrl 视频地址
117 
+		 * @fileType 视屏类型
135 118 
 		 * */
136 
-		function playVideo(playUrl){
119 
+		function playVideo(playUrl, fileType){
137 120 
 			layer.open({
138 121 
 				maxmin: true, //开启最大化最小化按钮
139 122 
 				type: 2,
140 
-				content: "./playVideo.html?playUrl=" + playUrl, //iframe的url，no代表不显示滚动条
123 
+				content: "./playVideo.html?playUrl=" + encodeURIComponent(playUrl) + "&fileType=" + encodeURIComponent(fileType), //iframe的url，no代表不显示滚动条
141 124 
 				title: ' ',
142 
-				area: ['648px', '320px'], //宽高
125 
+				area: ['90%', '90%'], //宽高
143 126 
 			});
144 127 
 		}
145 128 
 	</script>