Flash弹幕-Part3-核心播放器
本文已被浏览5005次
第二部分中介绍了观众手机上界面的代码,本节将会介绍大屏幕上的,用于显示电影和弹幕的部分.
首先,考虑播放器的问题,首先需要一个播放电影的播放器,之后将弹幕放在电影上面,并将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>
评论
您需要 先登录 才可以回复.