ソースを参照

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

fanlongfei 6 年 前
コミット
9b3033b07b

BIN
CallCenterWeb.UI/img/MY_VIDEO_POSTER.jpg


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

@@ -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

@@ -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>