入门客AI创业平台(我带你入门，你带我飞行)
博文笔记

jsp嵌入视频播放功能的总结（弹窗）

创建时间：2016-01-21 投稿人： 浏览次数：1302

今天做弹窗网页播放视频的功能，本来以为很简单，没想到还是遇到了很多问题。基础不扎实，罪过罪过。记录一下，忘记了就回来看看。

网页嵌套视频播放功能，第一反应想到的是<video>标签。但是主要是用ie8，ie9，同时要兼容ie10和ie11。由于ie把不支持html5，video标签无法用，所以就用了window media player 插件（内容见下面代码，有贴出）。

第一个问题：

因为需要注意弹窗播放，js弹窗方法开始用的window.open()，get方式传值。结果悲剧了，视频无法播放。后来发现是因为参数（阿里云获取的视频url）传了一部分，没有完全传过去。怀疑是超过了get能够传参的长度，于是我把url的前半部分去掉，来验证下。结果发现用短的参数还是无法完整传过去，很是纠结。最后仔细看了一下，原来url中有&符号，get方式识别成两个参数了，导致无法正确传递。而windo.open()貌似只能用get方式传参（也可能有我不知道的方法），所以只能换了window.showModalDialog来做弹窗，问题解决。

第二个问题：

在ie11上，window media player 无法正常播放。于是ie11，我采用的<video>标签（网上很多人说可以让ie8兼容<video>,采用的方法都是添加js，创建video标签。我试了很多方式都不行，不知道问题出在哪里）。所以，写了一段ie版本检测的js（内容见下面代码，有贴出）。解决了ie11的弹窗播放视频的功能。

imageCaseDetail.jsp：

判断ie版本，如果是ie11，就用<video>标签

<pre name="code" class="html"><script type="text/javascript">
	getBrowserVersion();
	function getBrowserVersion() {//ie版本检测
		var ieVersiuon;
		var userAgent = navigator.userAgent.toLowerCase();
		if (userAgent.match(/msie ([d.]+)/) != null) {//ie6--ie9 
			uaMatch = userAgent.match(/msie ([d.]+)/);
			return "IE" + uaMatch[1];
		} else if (userAgent.match(/(trident)/([w.]+)/)) {
			uaMatch = userAgent.match(/trident/([w.]+)/);
			switch (uaMatch[1]) {
			case "4.0":
				ieVersiuon = "ie8";
				break;
			case "5.0":
				ieVersiuon = "ie9";
				break;
			case "6.0":
				ieVersiuon = "ie10";
				break;
			case "7.0":
				ieVersiuon = "ie11";
				break;//ie11
			default:
				return "undefined";
			}
		}
		ifie11(ieVersiuon);
	}

	function ifie11(ieVersiuon) {
		if (ieVersiuon == "ie11") {
<%isIE11 = "1";%>
	}
	}
</script>

<body>
<%
									if ("1".equals(isIE11)) {
								%>
								<div style="float:left;width:12%;margin-top:15px;"
									id="videoplay1" class="divvideo">
									<input type="button" value="点击查看"
										style="width:128px;height:100px;"
										onclick="openVideoIE11("${imgCheck.ossUuid }") ">
									<div class="labeltxt">视频${index.index+1 }</div>
								</div>
								<%
									} else {
								%>
								<div style="float:left;width:12%;margin-top:15px;"
									id="videoplay1" class="divvideo">
									<input type="button" value="点击查看"
										style="width:128px;height:100px;"
										onclick="openVideo("${imgCheck.ossUuid }") ">
									<div class="labeltxt">视频${index.index+1 }</div>
								</div>
								<%
									}
								%>
</body>



imageCaseDetail.js





function openVideo(ossUuid){//跳转window media player页面
	var paramObj = {
			ossUuid : ossUuid
		};
	var rtnObj  = window
	.showModalDialog(contextRootPath + "/msplatform/pages/video/mobileVideoFrame.jsp", paramObj,
			"dialogWidth:1280px;dialogHeight:720px;scroll:no;status:no;center:yes");
}
function openVideoIE11(ossUuid){//video标签页面
	var paramObj = {
			ossUuid : ossUuid
		};
	var rtnObj  = window
	.showModalDialog(contextRootPath + "/msplatform/pages/video/mobileVideoFrameIE11.jsp", paramObj,
			"dialogWidth:800px;dialogHeight:600px;scroll:no;status:no;center:yes");
}


mobileVideoFrame.jsp




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/msplatform/pages/common/meta.jsp"%>
<%@ include file="/msplatform/pages/common/taglibs.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

	<link href = "${ctx }/msplatform/css/css.css" rel = "stylesheet" type = "text/css" />
	<link rel = "stylesheet" href = "${ctx }/msplatform/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
	<link rel = "stylesheet" href = "${ctx }/msplatform/css/replay/replay.css" type="text/css"/>
	<script src="${ctx}/msplatform/js/common/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="${ctx}/msplatform/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/msplatform/js/replay/mobileReplay.js"></script>
</head>

<body style="padding:2px; position:relative;">
	<div id = "window"  style="float:left">
				<object id="TB_PlayBack1"    classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
						<param NAME="AutoStart" VALUE="-1">
						<!--是否自动播放-->
						<param NAME="Balance" VALUE="0">
						<!--调整左右声道平衡,同上面旧播放器代码-->
						<param name="enabled" value="-1">
						<!--播放器是否可人为控制-->
						<param NAME="EnableContextMenu" VALUE="-1">
						<!--是否启用上下文菜单-->
						 <param NAME="url" VALUE=""> 
						<!--播放的文件地址-->
						<param NAME="PlayCount" VALUE="1">
						<!--播放次数控制,为整数-->
						<param name="rate" value="1">
						<!--播放速率控制,1为正常,允许小数,1.0-2.0-->
						<param name="currentPosition" value="0">
						<!--控件设置:当前位置-->
						<param name="currentMarker" value="0">
						<!--控件设置:当前标记-->
						<param name="defaultFrame" value="0">
						<!--显示默认框架-->
						<param name="invokeURLs" value="0">
						<!--脚本命令设置:是否调用URL-->
						<param name="baseURL" value="">
						<!--脚本命令设置:被调用的URL-->
						<param name="stretchToFit" value="0">
						<!--是否按比例伸展-->
						<param name="volume" value="50">
						<!--默认声音大小0%-100%,50则为50%-->
						<param name="mute" value="0">
						<!--是否静音-->
						<param name="uiMode" value="Full">
						<!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示-->
						<param name="windowlessVideo" value="0">
						<!--如果是0可以允许全屏,否则只能在窗口中查看-->
						<param name="fullScreen" value="0">
						<!--开始播放是否自动全屏-->
						<param name="enableErrorDialogs" value="-1">
						<!--是否启用错误提示报告-->
						<param name="SAMIStyle" value>
						<!--SAMI样式-->
						<param name="SAMILang" value>
						<!--SAMI语言-->
						<param name="SAMIFilename" value>
						<!--字幕ID-->
						
				</object>
			</div>
</body>
<script type="text/javascript">
		var obj = window.dialogArguments;
		var videoUrl = obj.ossUuid;
		window.TB_PlayBack1.url = videoUrl;
</script>
</html>

</pre><pre code_snippet_id="1561432" snippet_file_name="blog_20160121_3_1484930" name="code" class="html">mobileReplay.js：

<pre name="code" class="javascript">var originHeight = 0;
//初始化播放控件大小
$(function() {
	$("#window").css("width", $("body").width());
	$("#TB_PlayBack1").css("width", $("body").width());
	originHeight = $("html").height();
	$("#TB_PlayBack1").css("height",$("html").height());
	setTimeout("styleAdjust()", 1000);
});

function styleAdjust(){
	var curHeight = $("html").height();
	if(originHeight != curHeight){
		$("#window").css("width", $("body").width());
		$("#TB_PlayBack1").css("width", $("body").width());
		$("#TB_PlayBack1").css("height",$("html").height());
	}
}

mobileVideoFrameIE11.jsp：


<pre name="code" class="html"><!DOCTYPE HTML>
<html>
<head>
<title></title>
<script type="text/javascript">
	function addUrl() {
		var obj = window.dialogArguments;
		var videoUrl = obj.ossUuid;
		document.getElementById("v1").src=videoUrl;
        document.getElementById("media").load();
	}
</script>
</head>
<body onload="addUrl();">
	<video width="800px" height="600px"
		controls="controls" id="media" autoplay="autoplay">
		  <source id="v1" src="">
	</video>
</body>

</html>




总结完毕，第一次自己写博客，好难过。。。。。。。。。。






转载注明出处：http://blog.csdn.net/zxh_2581285470/article/details/50557083


            
                
				
			阅读更多
		
        	

            

                            

            
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。

            

                
    
                    
  • 上一篇：没有了
    • 
                    
  • 下一篇：没有了
    • 
                

            

                    

        

            

                                    未上传头像
                                

                

                

            


            
                        
        

    





copyright © 2008-2019 入门客AI创业平台 版权所有 备案号：湘ICP备2023012770号