Главная Обзор Помощь
Регистрация Войти
zhengbingbing
/
XinXiangXLX_UI
Следить 1
В избранное 0
Ответвить 0
Код Обсуждения 0 Запросы на слияние 0 Коммиты 734 Релизы 0 Вики
Просмотр исходного кода

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

fanlongfei лет назад: 6
Родитель
3bf322585a
Сommit
9b3033b07b
4 измененных файлов с 31 добавлено и 35 удалено
Единый вид Показать статистику Diff
  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
Просмотреть файл


Разница между файлами не показана из-за своего большого размера
+ 1 - 0
CallCenterWeb.UI/js/videojs/videojs-ie8.min.js


+ 23 - 11
CallCenterWeb.UI/zhiShiKu/template/playVideo.html
Просмотреть файл

7 
 		<script src="../../Script/Common/huayi.load.js"></script>
 7 
 		<script src="../../Script/Common/huayi.load.js"></script>
8 
 		<script src="../../Script/Common/huayi.config.js"></script>
 8 
 		<script src="../../Script/Common/huayi.config.js"></script>
9 
 		<link href="../../js/videojs/video-js.min.css" rel="stylesheet" type="text/css" />
 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 
 		<!--[if lt IE 9]>
 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 
 		<![endif]-->
 12 
 		<![endif]-->
14 
 		<style type="text/css">
 13 
 		<style type="text/css">
15 
 			.video-js {
 14 
 			.video-js {
16 
-				margin: 0 auto;
15 
+				width: 100%;
16 
+				height: 90%;
17 
+				left: 50%;
17 
 				top: 50%;
 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 
 			.video-js .vjs-big-play-button {
 26 
 			.video-js .vjs-big-play-button {
24 
 				margin-left: -1.5em;
 29 
 				margin-left: -1.5em;
25 
 				margin-top: -0.75em;
 30 
 				margin-top: -0.75em;
26 
 			}
 31 
 			}
32 
+
33 
+			.video-js .vjs-tech{
34 
+				height: 100%!important;
35 
+			}
27 
 		</style>
 36 
 		</style>
28 
 	</head>
 37 
 	</head>
29
38
30 
 	<body>
 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 
 		 data-setup="{}">
 42 
 		 data-setup="{}">
34 
 			<!-- <source src="http://59.80.44.91/vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> -->
 43 
 			<!-- <source src="http://59.80.44.91/vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> -->
35 
 			<p class="vjs-no-js">
 44 
 			<p class="vjs-no-js">
43 
 	<script>
 52 
 	<script>
44 
 		var token = $.cookie("token");
 53 
 		var token = $.cookie("token");
45 
 		var playUrl = helper.request.queryString("playUrl");
 54 
 		var playUrl = helper.request.queryString("playUrl");
55 
+		var fileType = helper.request.queryString("fileType");
46
56
47 
 		$(function() {
 57 
 		$(function() {
48 
 			if (playUrl) {
 58 
 			if (playUrl) {
49 
-				console.log(playUrl);
59 
+				playUrl = decodeURIComponent(playUrl);
60 
+				fileType = decodeURIComponent(fileType);
50 
 				var options = {
 61 
 				var options = {
51 
 					preload: 'auto',
 62 
 					preload: 'auto',
63 
+					playbackRates: [0.5, 1, 1.5, 2], // 倍速
52 
 					sources: [
 64 
 					sources: [
53 
 						{
 65 
 						{
54 
 							src: playUrl,
 66 
 							src: playUrl,
55 
-							type: 'video/mp4'
67 
+							type: fileType
56 
 						},
68 
 						},
57 
 						// {
 69 
 						// {
58 
 						// 	src: 'http://59.80.44.91/vjs.zencdn.net/v/oceans.mp4',
 70 
 						// 	src: 'http://59.80.44.91/vjs.zencdn.net/v/oceans.mp4',
66 
 				};
 78 
 				};
67
79
68 
 				var player = videojs('playVideo', options, function onPlayerReady() {
 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 
 					// In this context, `this` is the player that was created by Video.js.
 83 
 					// In this context, `this` is the player that was created by Video.js.
72 
 					this.play();
 84 
 					this.play();
73
85
74 
 					// How about an event listener?
 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
Просмотреть файл

8 
 		<link rel="stylesheet" href="../../css/init.css" />
 8 
 		<link rel="stylesheet" href="../../css/init.css" />
9 
 		<link rel="stylesheet" href="../css/seeDetail.css" />
 9 
 		<link rel="stylesheet" href="../css/seeDetail.css" />
10 
 		<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
 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 
 		<title>知识库查询</title>
 11 
 		<title>知识库查询</title>
14 
 	</head>
 12 
 	</head>
15
13
40 
 		</table>
 38 
 		</table>
41 
 	</body>
 39 
 	</body>
42 
 	<script src="../../js/download/download.js"></script>
 40 
 	<script src="../../js/download/download.js"></script>
43 
-	<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
44 
 	<script>
 41 
 	<script>
45 
 		var token = $.cookie("token");
 42 
 		var token = $.cookie("token");
46 
 		var changeGetid = helper.request.queryString("changeGetid");
 43 
 		var changeGetid = helper.request.queryString("changeGetid");
49 
 			if (changeGetid) {
 46 
 			if (changeGetid) {
50 
 				getChangeBox();
 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 
 		function getChangeBox() {
 51 
 		function getChangeBox() {
88 
 								var fileType = n.F_FileType.split("\/")[0];
 70 
 								var fileType = n.F_FileType.split("\/")[0];
89 
 								if (fileType === 'image') {
 71 
 								if (fileType === 'image') {
90 
 									$('<div class="img-box">' +
 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 
 										'") title="点击下载"><i class="fa fa-download" aria-hidden="true"></i></span></span>' +
 74 
 										'") title="点击下载"><i class="fa fa-download" aria-hidden="true"></i></span></span>' +
93 
 										'<img layer-src="' + n.F_FileUrl + '" src="' + n.F_FileUrl + '" alt="' + n.F_FileName +
 75 
 										'<img layer-src="' + n.F_FileUrl + '" src="' + n.F_FileUrl + '" alt="' + n.F_FileName +
94 
 										'" class="image-item" /><div>').appendTo("#fileList");
 76 
 										'" class="image-item" /><div>').appendTo("#fileList");
97 
 										'<span class="img_mask"><span href="javascript:;" onclick=downloadFile("' +  n.F_FileUrl + '","' + n.F_FileName +
 79 
 										'<span class="img_mask"><span href="javascript:;" onclick=downloadFile("' +  n.F_FileUrl + '","' + n.F_FileName +
98 
 										'","' + n.F_FileType +
 80 
 										'","' + n.F_FileType +
99 
 										'") title="点击下载"><i class="fa fa-download" aria-hidden="true"></i></span></span>' +
 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 
 								} else {
 83 
 								} else {
102 
 									$('<div class="img-box">' +
 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 
 										'","' + n.F_FileType +
 86 
 										'","' + n.F_FileType +
105 
 										'") title="点击下载"><i class="fa fa-download" aria-hidden="true"></i></span></span>' +
 87 
 										'") title="点击下载"><i class="fa fa-download" aria-hidden="true"></i></span></span>' +
106 
 										'<span class="img_filename">' + n.F_FileName.split(".")[1] + '</span><div>').appendTo("#fileList");
 88 
 										'<span class="img_filename">' + n.F_FileName.split(".")[1] + '</span><div>').appendTo("#fileList");
132 
 		/**
 114 
 		/**
133 
 		 * 播放视频
 115 
 		 * 播放视频
134 
 		 * @playUrl 视频地址
 116 
 		 * @playUrl 视频地址
117 
+		 * @fileType 视屏类型
135 
 		 * */
 118 
 		 * */
136 
-		function playVideo(playUrl){
119 
+		function playVideo(playUrl, fileType){
137 
 			layer.open({
 120 
 			layer.open({
138 
 				maxmin: true, //开启最大化最小化按钮
 121 
 				maxmin: true, //开启最大化最小化按钮
139 
 				type: 2,
 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 
 				title: ' ',
 124 
 				title: ' ',
142 
-				area: ['648px', '320px'], //宽高
125 
+				area: ['90%', '90%'], //宽高
143 
 			});
 126 
 			});
144 
 		}
 127 
 		}
145 
 	</script>
 128 
 	</script>