Kezdőlap Felfedezés Súgó
Bejelentkezés
opensource
/
MediaServerUI
2
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

fix video iframe

kkkkk 5 éve
szülő
c8668d82c0
commit
be15a87377
2 módosított fájl, 63 hozzáadás és 40 törlés
Egyesített Nézet Diff Statisztika Mutatása
  1. 35 18
      public/video/video.html
  2. 28 22
      src/components/videoList.vue

+ 35 - 18
public/video/video.html
Fájl Megtekintése 

@@ -1,22 +1,39 @@
 
 <!DOCTYPE HTML>
 
 <!DOCTYPE HTML>
 
 <html>
 
 <html>
 
-    <head>
 
-        <title>liveplayer</title>
 
-        <meta charset="utf-8">
 
-        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
 
-        <script type="text/javascript" src="liveplayer-element.min.js"></script>
 
+	<head>
 
+		<title>liveplayer</title>
 
+		<meta charset="utf-8">
 
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
+		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
 
+		<script type="text/javascript" src="liveplayer-element.min.js"></script>
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
-			window.onbeforeunload=function(e){     
-			　　console.log("page close");
 
-			} 
+			window.onload = function() {
 
+
 
+			}
 
+
 
+			function getQueryVariable(variable) {
 
+				var query = window.location.search.substring(1);
 
+				var vars = query.split("&");
 
+				for (var i = 0; i < vars.length; i++) {
 
+					var pair = vars[i].split("=");
 
+					if (pair[0] == variable) {
 
+						return pair[1];
 
+					}
 
+				}
 
+				return (false);
 
+			}
 
 		</script>
 
 		</script>
 
-    </head>
 
-    <body>
 
-       <!-- <live-player id="player01" video-url="rtmp://live.hkstv.hk.lxdns.com/live/hks" live="true" stretch="true">
 
-            <div style="position:absolute;left:15px;top:15px;color:#FFF;">自定义叠加层</div>
 
-        </live-player> -->
 
-        <!-- <live-player video-url="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" live="false" stretch="true"></live-player> -->
 
-		<live-player id="player01" video-url="rtmp://218.59.173.214/rtp/0BEBC202" live="true" stretch="true" show-custom-button="false">
 
-    </body>
 
-</html>
 
+	</head>
 
+	<body>
 
+		<!-- <live-player id="player01" video-url="rtmp://218.59.173.214/rtp/0BEBC202" live="true" stretch="true" show-custom-button="false"> -->
 
+		<live-player id="player01" live="true" stretch="true" show-custom-button="false"></live-player>
 
+		<!-- <live-player id="player01" live="true" stretch="true">
 
+		</live-player> -->
 
+		<script>
 
+			var videoPath=getQueryVariable("url");
 
+			console.log('播放地址：'+videoPath);
 
+			var player = document.getElementById('player01');
 
+			player.setAttribute("video-url", videoPath);
 
+		</script>
 
+	</body>
 
+</html>

+ 28 - 22
src/components/videoList.vue
Fájl Megtekintése 

@@ -10,7 +10,7 @@
 
 			<div class="video-item" v-for="(item, index) in videoList">
 
 			<div class="video-item" v-for="(item, index) in videoList">
 
 				<!-- <video class="video-js vjs-default-skin vjs-big-play-centered" :id="genVideoId(index, item)" style="width: 15rem; height: 10rem;" controls>
 
 				<!-- <video class="video-js vjs-default-skin vjs-big-play-centered" :id="genVideoId(index, item)" style="width: 15rem; height: 10rem;" controls>
 
 				</video> -->
 
 				</video> -->
 
-				<img src="../assets/play.png" @click="showVideo()"/>
 
+				<img src="../assets/play.png" @click="showVideo(item)"/>
 
 				<div class="video-item-title">
 
 				<div class="video-item-title">
 
 					{{ item.stream }}
 
 					{{ item.stream }}
 
 					<el-button icon="el-icon-search" circle size="mini" style="float: right;" @click="showVideoInfo(item)"></el-button>
 
 					<el-button icon="el-icon-search" circle size="mini" style="float: right;" @click="showVideoInfo(item)"></el-button>
 
@@ -19,7 +19,7 @@
 
 		</div>
 
 		</div>
 
 		
 		
 		<el-dialog title="视频播放" :visible.sync="showVideoDialog" :destroy-on-close="true">
 
 		<el-dialog title="视频播放" :visible.sync="showVideoDialog" :destroy-on-close="true">
 
-			<iframe src="/video/video.html" style="width:100%; height:35rem;" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
 
+			<iframe :src="getPlayerPath" style="width:100%; height:35rem;" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
 
 		</el-dialog>
 
 		</el-dialog>
 
 	</div>
 
 	</div>
 
 </template>
 
 </template>
 
@@ -37,6 +37,11 @@ export default {
 
 			videoComponentList: []
 
 			videoComponentList: []
 
 		};
 
 		};
 
 	},
 
 	},
 
+	computed:{
 
+		getPlayerPath:function(){
 
+			return '/video/video.html?url='+this.videoUrl;
 
+		}
 
+	},
 
 	mounted() {
 
 	mounted() {
 
 		this.getVideoList();
 
 		this.getVideoList();
 
 	},
 
 	},
 
@@ -51,26 +56,26 @@ export default {
 
 		});
 
 		});
 
 	},
 
 	},
 
 	methods: {
 
 	methods: {
 
-		genVideoId: function(position, stream) {
 
-			let that = this;
 
-			var story_sources = [
 
-				{
 
-					type: 'rtmp/flv',
 
-					src: that.$global.baseMediaUrl + stream.app + '/' + stream.stream
 
-				}
 
-			];
 
-			//延迟1s执行，给dom生成一定的时间
 
-			stream.delay=setTimeout(function() {
 
-				let player = videojs('video-' + position); 
-				player.ready(function() {
 
-					var obj = this;
 
-					obj.src(story_sources);
 
-					stream.video=player;
 
-					console.log(JSON.stringify(stream));
 
-				});
 
-			}, 1000);
 
-			return 'video-' + position;
 
-		},
 
+		// genVideoId: function(position, stream) {
 
+		// 	let that = this;
 
+		// 	var story_sources = [
 
+		// 		{
 
+		// 			type: 'rtmp/flv',
 
+		// 			src: that.$global.baseMediaUrl + stream.app + '/' + stream.stream
 
+		// 		}
 
+		// 	];
 
+		// 	//延迟1s执行，给dom生成一定的时间
 
+		// 	stream.delay=setTimeout(function() {
 
+		// 		let player = videojs('video-' + position); 
+		// 		player.ready(function() {
 
+		// 			var obj = this;
 
+		// 			obj.src(story_sources);
 
+		// 			stream.video=player;
 
+		// 			console.log(JSON.stringify(stream));
 
+		// 		});
 
+		// 	}, 1000);
 
+		// 	return 'video-' + position;
 
+		// },
 
 		getVideoList: function() {
 
 		getVideoList: function() {
 
 			let that = this;
 
 			let that = this;
 
 			this.$axios({
 
 			this.$axios({
 
@@ -91,6 +96,7 @@ export default {
 
 		},
 
 		},
 
 		showVideo:function(streamInfo){
 
 		showVideo:function(streamInfo){
 
 			this.showVideoDialog=true;
 
 			this.showVideoDialog=true;
 
+			this.videoUrl=this.$global.baseMediaUrl + streamInfo.app + '/' + streamInfo.stream;
 
 		}
 
 		}
 
 	}
 
 	}
 
 };
 
 };