HTML嵌入视频播放器

为什么80%的码农都做不了架构师？>>>   

在最近一个项目中需要简单的流媒体视频播放，经过一番搜索后找到一些合适的播放器及代码，在此记录并分享给大家。

由于仅需播放一些简单的格式因此不需要视频解码服务器。

1.播放rm、rmvb需要vlc或real的支持，要额外安装插件，暂不考虑。

2.播放swf、avi、wmv、mp3可以使用wmp(Windows Media Player)播放，但必须是windows客户端才可以。

播放代码如下：(注意播放地址替换成实际地址或jsp代码)

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
	codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,1,5,217"
	id="MediaPlayer" type=application/x-oleobject width="560" height="360"
	standby="Loading Microsoft Windows Media Player components..."
	VIEWASTEXT align="middle">
	<!--播放的文件地址-->
	<param name="Filename" value="视频地址，可以使用相对路径" valuetype="ref" />
	<!--是否自动调整播放大小-->
	<param name="AutoSize" value="0" />
	<!--是否自动播放-->
	<param name="AutoStart" value="1" />
	<param name="AudioStream" value="-1" />
	<param name="AnimationAtStart" value="0" />
	<param name="AllowScan" value="-1" />
	<param name="BaseURL" value="" />
	<param name="AllowChangeDisplaySize" value="0" />
	<param name="AutoRewind" value="0" />
	<!--左右声道平衡,最左-9640,最右9640-->
	<param name="Balance" value="0" />
	<!--缓冲时间-->
	<param name="BufferingTime" value="5" />
	<param name="CaptioningID" value="" />
	<param name="ClickToPlay" value="0" />
	<param name="CursorType" value="32512" />
	<!--当前播放进度 -1 表示不变,0表示开头 单位是秒,比如10表示从第10秒处开始播放,值必须是-1.0或大于等于0-->
	<param name="CurrentPosition" value="-1" />
	<param name="CurrentMarker" value="0" />
	<param name="DefaultFrame" value="1" />
	<param name="DisplayBackColor" value="0" />
	<param name="DisplayForeColor" value="16777215" />
	<param name="DisplayMode" value="0" />
	<!--视频1-50%, 0-100%, 2-200%,3-全屏 其它的值作0处理,小数则采用四舍五入然后按前的处理-->
	<param name="DisplaySize" value="0" />
	<param name="Enabled" value="-1" />
	<!-- 是否用右键弹出菜单控制-->
	<param name="EnableContextMenu" value="-1" />
	<param name="EnablePositionControls" value="0" />
	<param name="EnableFullScreenControls" value="0" />
	<!--是否允许拉动播放进度条到任意地方播放-->
	<param name="EnableTracker" value="1" />
	<param name="InvokeURLs" value="-1" />
	<param name="Language" value="-1" />
	<!--是否静音-->
	<param name="Mute" value="0" />
	<!--重复播放次数,0为始终重复-->
	<param name="PlayCount" value="1" />
	<param name="PreviewMode" value="0" />
	<!--播放速率控制,1为正常,允许小数-->
	<param name="Rate" value="1" />
	<!--SAMI样式-->
	<param name="SAMIStyle" value="" />
	<!--SAMI语言-->
	<param name="SAMILang" value="" />
	<!--字幕ID-->
	<param name="SAMIFilename" value="" />
	<!--是否显示字幕,为一块黑色,下面会有一大块黑色,一般不显示-->
	<param name="ShowCaptioning" value="0" />
	<!--是否显示控制,比如播放,停止,暂停-->
	<param name="ShowControls" value="-1" />
	<!--是否显示音量控制-->
	<param name="ShowAudioControls" value="-1" />
	<!--显示节目信息,比如版权等-->
	<param name="ShowDisplay" value="0" />
	<!--是否启用上下文菜单-->
	<param name="ShowGotoBar" value="0" />
	<!--是否显示往前往后及列表,如果显示一般也都是灰色不可控制-->
	<param name="ShowPositionControls" value="-1" />
	<!-- 默认是1 -->
	<!--当前播放信息,显示是否正在播放,及总播放时间和当前播放到的时间-->
	<param name="ShowStatusBar" value="-1" />
	<!-- 默认是1 -->
	<!--是否显示当前播放跟踪条,即当前的播放进度条-->
	<param name="ShowTracker" value="-1" />
	<!-- 默认是1 -->
	<!--显示部的宽部,如果小于视频宽,则最小为视频宽,或者加大到指定值,并自动加大高度.此改变只改变四周的黑框大小,不改变视频大小-->
	<param name="VideoBorderWidth" value="0" />
	<!--显示黑色框的颜色, 为RGB值,比如ffff00为黄色-->
	<param name="VideoBorderColor" value="0" />
	<!--音量大小,负值表示是当前音量的减值,值自动会取绝对值,最大为0,最小为-9640-->
	<param name="Volume" value="-1070" />
	<!--如果是0可以允许全屏,否则只能在窗口中查看-->
	<param name="WindowlessVideo" value="0" />
	<param name="TransparentAtStart" value="-1" />
	<!-- 默认是0 -->
	<param name="VideoBorder3D" value="0" />
	<param name="SelectionStart" value="0" />
	<param name="SelectionEnd" value="true" />
	<param name="SendOpenStateChangeEvents" value="-1" />
	<param name="SendWarningEvents" value="-1" />
	<param name="SendErrorEvents" value="-1" />
	<param name="SendKeyboardEvents" value="0" />
	<param name="SendMouseClickEvents" value="0" />
	<param name="SendMouseMoveEvents" value="0" />
	<param name="SendPlayStateChangeEvents" value="-1" />
</object>

3.播放flv、mp4、swf可以使用开源的网页flash播放器。

使用到的网页播放器有jaris、jwplayer、videobox，其实flowplayer、CuPlayerMiniV10酷播迷你、Flvplayer也都是不错的选择。

由于jaris是开源免费的，推荐使用；此外jwplayer与酷播、flowplayer是闭源的，在商业项目上应用的话需要通过授权或购买使用。

• 功能方面

jaris与酷播、videobox(videoBox使用的播放器是外挂的flvplayer及wmp)均支持flv及mp4格式的播放，

jwplayer除支持前两种格式外还支持swf及mp3格式的播放，可以说支持的格式最多也比较稳定。

• 界面方面

jaris做的最好并且定制性最强(支持视频预览图片的添加及默认视频窗口的图片图换)，videoBox使用的jquery特效也不错，适于弹出播放的模式；

jwplayer与flowplayer算是中规中矩，与一般的视频播放网站，如优酷等UI类似，值得一提的是jwplayer提供了视频地址分享的功能，但是可定制性不强。

此外，酷播的外挂广告等功能需要商业付费不在此讨论范围中。

• 测试使用

酷播在IE浏览器中使用正常，但是在google及opera中可以加载flash播放器却无法播放视频，不知原因。

附录：

• jaris的播放代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="js/swfobject.js" type="text/javascript"></script>
		<script type="text/javascript">
		var flashvarsVideo = {
			source: "<%=path%>",/*视频地址,可以使用相对路径或绝对路径*/
			type: "video",
			streamtype: "file",
			server: "",/*Used for rtmp streams*/
			duration: "52",
			poster: "http://jaris.sourceforge.net/images/poster.png",/*这里是视频预览图片*/
			autostart: "true",/*设置打开时是否自动播放*/
			logo: "http://jaris.sourceforge.net/images/logo.png",/*这里是播放器的logo,显示在左上角*/
			logoposition: "top left",
			logoalpha: "30",
			logowidth: "130",
			logolink: "http://jaris.sourceforge.net",
			hardwarescaling: "false",
			darkcolor: "000000",
			brightcolor: "4c4c4c",
			controlcolor: "FFFFFF",
			hovercolor: "67A8C1"
		};
		var params = {
			menu: "false",
			scale: "noScale",
			allowFullscreen: "true",
			allowScriptAccess: "always",
			bgcolor: "#000000",
			quality: "high",
			wmode: "opaque"
		};
		var attributes = {
			id:"JarisFLVPlayer"
		};
		swfobject.embedSWF("JarisFLVPlayer.swf", "altContentOne", "576px", "360px", "10.0.0", "expressInstall.swf", flashvarsVideo, params, attributes);
	</script>
	</head>
<body>
<div id="altContentOne"><!--该ID指定播放器位置,不能更改-->
	<p>
		<a href="http://www.adobe.com/go/getflashplayer">
               <img src="<%=path%>images/topic/get_flash_player.gif"
		alt="Get Adobe Flash player" /> </a>
	</p>
</div>
</body></html>

• jwplayer的播放代码：

<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" height="360" width="560">
	<param name="movie" value="player.swf" />
	<param name="allowfullscreen" value="true" />
	<param name="allowscriptaccess" value="always" />
	<param name="flashvars" value="file=视频地址&image=preview.jpg" /><!--preview.jpg为视频预览图片,推荐使用相对路径-->
	<embed type="application/x-shockwave-flash" id="player2"
	name="player2" src="player.swf" width="640" height="320"
	allowscriptaccess="always" allowfullscreen="true"
	flashvars="file=视频地址&image=preview.jpg" />
<!--该处视频地址及预览图片同上。在实际测试中如果只填写param中的视频地址,则在IE浏览器下可以正常播放,但是在chrome下将无法播放-->
</object>

参考：分别实现网页播放mp3、flv、wmv、Flash，代码兼容FireFox

转载于:https://my.oschina.net/cwalet/blog/306260