登录

在这个站点登录

保存我的登录记录

<<忘记密码?

还没有账号?点此注册>>

Jerry

Flash弹幕-Part3-核心播放器

分享到:

本文已被浏览2701

第二部分中介绍了观众手机上界面的代码,本节将会介绍大屏幕上的,用于显示电影和弹幕的部分.

首先,考虑播放器的问题,首先需要一个播放电影的播放器,之后将弹幕放在电影上面,并将flash的背景设置为透明即可.

电影播放器如果要求不是很高,可以直接使用<video>标签,使用HTML5原生播放器界面,如果希望做的华丽一些,可以考虑直接拿网络上现成的js播放器即可.

 <video src="VideoFile" controls="controls" autoplay="autoplay">
 	您的浏览器不支持 video 标签。
 </video>
 

对于<video>标签而言,其中src参数是电影文件相对于此页面的路径

有了底下的电影,我们还需要一个flash构成的弹幕层,这个弹幕层长度随意,一般取电影的宽度,此处我取了1980px

对于Flash的内容,请见第四部分…..

参考第四部分做出来flash后需要添加到HTML页面中,我是直接使用Flash的F12发布为HTML文档,然后将下面的内容复制到自己的项目中

 <script type="text/javascript">
	AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1980','height','100','src','player','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','player' ); //end AC code
</script>
<noscript>
 	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1980" height="100">
 		<param name="movie" value="player.swf">
 		<param name="quality" value="high">
 		<param name="wmode" value="transparent">
 		<embed src="player.swf" width="1980" height="100" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
 	</object>
 </noscript>
 

我们特别的提一下,上面标出的那一行是用来让flash在网页上呈现出透明背景用的一行,需要后续自己添加

将flash覆盖在上面,而网页上两个元素如果不依赖于CSS(层叠样式表)的规定,很难能够做到相互层叠,那么CSS便是必不可少的

body {
 	position:relative;
 	text-algin:center;
 	z-index:0;
 }
#vd {
 	position:absolute;
 	left:0px;
 	top:0px;
 	z-index:1;
 	width: 1980px;
 	height: 1080px;
  }
 #dan {
 	position:absolute;
 	left:0px;
 	top:0px;
 	z-index:2;
 	width: 1980px;
 	height: 100px;
  }
 

在这个CSS中,#vd是元素Video的样式,#dan是表层Flash弹幕层的样式,可以发现,其中的参数z-index是用于定义叠放次序的,并且值越大,会更加靠上.

为了方便排版,我为两个主要元素分别又套了一个<div>标签

 <div id="dan">
......
 </div>
 <div id="vd">
 ......
</div>
 

最后拼在一起,就得到了最终的页面,在网页播放时需要按F11进入全屏模式,注意,不是视频进入全屏模式,那样会导致弹幕flash被屏蔽而无法显示弹幕!网页全屏后可以适当调整缩放比例,让视频接近1全屏

<html>
 	<head>
 		<title>弹幕电影播放器</title>
 		<style>
			body {
				position:relative;
				text-algin:center;
				z-index:0;
			}
			#vd {
				position:absolute;
				left:0px;
				top:0px;
				z-index:1;
				width: 1980px;
				height: 1080px;
			}
			#dan {
				position:absolute;
				left:0px;
				top:0px;
				z-index:2;
				width: 1980px;
				height: 100px;
			}
		</style>
 		<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
	 </head>
	 <body bgcolor="#000000">
	<center>
 		<div id="dan">
 			<script type="text/javascript">
				AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1980','height','100','src','player','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','player' ); //end AC code
			</script>
 			<noscript>
 				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1980" height="100">
 	        			<param name="movie" value="player.swf">
 					<param name="quality" value="high">
 					<param name="wmode" value="transparent">
 					<embed src="player.swf" width="1980" height="100" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
 				</object>
 			</noscript>
 		</div>
 		<div id="vd">
 			<video src="*.*" controls="controls" autoplay="autoplay">
 				您的浏览器不支持 video 标签。
 			</video>
 		</div>
 	</center>
 	</body>
 </html>
 

效果图:
Flash弹幕-Part3-核心播放器

 手机扫描左边的二维码,立刻将文章收入手机!
 微信扫描左边二维码,点击右上角即可分享到朋友圈!
严禁任何非授权的采集与转载,转载须经站长同意并在文章显著位置标注本文连接,站长保留追究法律责任的权利.

评论

 您需要 先登录 才可以回复.