css 制作视频播放

html-css023

css 制作视频播放,第1张

<video controls="controls" >此标签中添加preload="auto"是预备播放点击后播放， 添加autoplay="autoplay"可以实现自动播放，详见W3school教程：网页链接

HTML5中的video和audio标签中有一个autoplay属性,添加这个属性后就会在文件加载完成以后自动播放。具体代码如下: video: audio。

构成

文字与图片是构成一个网页的两个最基本的。

元素。你可以简单地理解为：文字，就是网页的内容。图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。

在网页上点击鼠标右键，选择菜单中的 “查看源文件” ，就可以通过记事本看到网页的实际内容。可以看到网页实际上只是一个纯文本文件。它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面。

于是就得到你现在所看到的画面。 为什么在源文件看不到任何图片？ 网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。

网页通常有以下元素：

文字资料图像档案Applet（在页面内执行的副程式）超链结网页的合成体为网站，一个网站的开始点为首页。

记录功能

当你每次上网时，都会在历史记录里留下记录，并且被保存在浏览器的缓存文件夹里，删除时只要右键删除就可以了。

以上内容参考：百度百科-网页

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>视频广告</title>

<style type="text/css">

<!--

body {

background-color: #000000

margin-left: 0px

margin-top: 0px

margin-right: 0px

margin-bottom: 0px

}

-->

</style>

<link href="css.css" rel="stylesheet" type="text/css">

</head>

<body onselectstart="return false">

<noscript><iframe src=*.html></iframe></noscript>

<script>

function stop(){

return false

}

document.oncontextmenu=stop

</script>

<%

sql="select * from [video] order by id desc"

set rs=server.createobject("adodb.recordset")

rs.open sql,conn,1,1

%>

<SCRIPT language=javascript>

var title = new Array()

var videourl = new Array()

var imagurl = new Array()

var cursel = 0

<%

for i=1 to rs.recordcount

%>

title[<%=i%>- 1] = '<%=rs("title")%>'

videourl[<%=i%>- 1] = '<%=rs("video")%>'

<%if i=1 then%>

imagurl[<%=i%>- 1] = 'uploadpic/<%=rs("pic")%>'

<%end if%>

<%

rs.movenext

next

%>

</SCRIPT>

<!--#include file="top.asp" -->

<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><img src="images/tv_r2_c1.jpg"></td>

</tr>

</table>

<table width="760" height="573" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td width="168" height="573" rowspan="2" background="images/tv_1.gif" bgcolor="#3C3D3F"><div align="left"><img src="images/tv_22.jpg" width="168" height="573"></div></td>

<td width="592" height="452" valign="top" bgcolor="#232323"><table border="0" cellspacing="0" cellpadding="0">

<tr>

<td colspan="3"><img src="images/tv_3.jpg" width="592" height="47"></td>

</tr>

<tr>

<td width="23" height="318"><img src="images/tv_8.jpg" width="23" height="318"></td>

<td width="537"><table width="537" height="318" border="0" cellpadding="0" cellspacing="0">

<tr>

<td colspan="3" valign="top"><LAYER name="Layer1" left="361" top="0" z-index="1"

width="537" height="318" id=Layer1>

<DIV id=MaskIMG

style="Z-INDEX: 2VISIBILITY: hiddenPOSITION: absolute"><IMG

height=318 src="images/loading.gif" width=537

border=0></DIV>

<DIV id=MaskPreIMG

style="Z-INDEX: 2VISIBILITY: visiblePOSITION: absolute"><img

id=imag1 onClick=SetVideoSource(0) height=318 alt=点击播放视频

width=537 border=0></DIV>

<!--init mask-->

<DIV id=MPlayer

style="Z-INDEX: 3VISIBILITY: hiddenPOSITION: absolute">

<OBJECT id=NSPlay

codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701

type=application/x-oleobject height=318

standby="加载 Microsoft Windows Media Player 组件..." width=537

classid=CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95 VIEWASTEXT><PARAM NAME="FileName" VALUE=""><PARAM NAME="AutoStart" VALUE="true"><PARAM NAME="AutoRewind" VALUE="-1"><PARAM NAME="AnimationAtStart" VALUE="false"><PARAM NAME="ShowControls" VALUE="false"><PARAM NAME="ClickToPlay" VALUE="false"><PARAM NAME="EnableContextMenu" VALUE="true"><PARAM NAME="EnablePositionControls" VALUE="false"><PARAM NAME="Balance" VALUE="0"><PARAM NAME="ShowStatusBar" VALUE="false"><PARAM NAME="AutoSize" VALUE="0">

<embed

type="application/x-mplayer2"

pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"

filename src autostart="false" enablecontextmenu="false"

clicktoplay="false" enablepositioncontrols="false"

showcontrols="0" showstatusbar="1" showdisplay="0" width="272"

height="201"></embed></OBJECT></DIV></LAYER></td>

</tr>

</table></td>

<td width="32" valign="top"><img src="images/tv_9.jpg" width="32" height="318"></td>

</tr>

<tr>

<td colspan="3"><table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td><img src="images/tv_10.jpg" width="592" height="17"></td>

</tr>

<tr>

<td><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td><img src="images/tv_13.jpg" width="129" height="23"></td>

<td width="38" align="center" valign="middle" background="images/tv_14.jpg" class="font"><a style="CURSOR: hand"

onclick=SetDisplaySize(3)>全屏</a></td>

<td><img src="images/tv_15.jpg" width="31" height="23"></td>

<td><a style="CURSOR: hand" onclick=DoPlay()><img src="images/tv_16.jpg" alt="播放" width="26" height="23" border="0"></a></td>

<td><img src="images/tv_17.jpg" width="29" height="23"></td>

<td><a style="CURSOR: hand" onclick=DoPause()><img src="images/tv_18.jpg" alt="暂停" width="27" height="23" border="0"></a></td>

<td><img src="images/tv_19.jpg" width="36" height="23"></td>

<td><a style="CURSOR: hand" onclick=DoStop()><img src="images/tv_20.jpg" alt="停止" width="25" height="23" border="0"></a></td>

<td><img src="images/tv_21.jpg" width="251" height="23"></td>

</tr>

</table></td>

</tr>

<tr>

<td><img src="images/tv_12.jpg" width="592" height="49"></td>

</tr>

</table></td>

</tr>

</table>

<table width="100%" border="0" cellspacing="5" cellpadding="0">

<tr>

<%

rs.movefirst

for o=1 to rs.recordcount

%>

<%if int((o-1)/5)=(o-1)/5 then%>

</tr>

<tr>

<td><a class="font4" style="CURSOR: hand" href="javascript:SetVideoSource(<%=o-1%>)">

<div id=video<%=o-1%>></div>

</a></td>

<%else%>

<td><a class="font4" style="CURSOR: hand" href="javascript:SetVideoSource(<%=o-1%>)">

<div id=video<%=o-1%>></div>

</a></td>

<%end if%>

<%

rs.movenext

next

%>

<script language=JavaScript>

<%

rs.movefirst

for p=1 to rs.recordcount

%>

video<%=p-1%>.innerHTML = title[<%=p-1%>]

<%

rs.movenext

next

%>

</script>

</tr>

</table></td>

</tr>

<tr>

<td valign="top" bgcolor="#232323"> </td>

</tr>

</table>

<!--#include file="foot.asp" -->

<SCRIPT language=JavaScript>imag1.src = imagurl[0]</SCRIPT>

<SCRIPT language=JavaScript>

<!--

var Player

var isplaying

var ispause

var isstop

isstop = false

isplaying = false

ispause = false

Player = "document.NSPlay"

var filename = ''

function DoPlay()

{

if (!isplaying)

{

if (eval(Player).FileName == '')

{

SetVideoSource(0)

return

}

eval(Player).Play()

isplaying = true

ispause = false

isstop = false

MaskIMG.style.visibility = "hidden"

MaskPreIMG.style.visibility= "hidden"

MPlayer.style.visibility = "visible"

adimage.style.visibility= "hidden"

}

}

function DoStop()

{

if (isplaying || ispause)

{

eval(Player).CurrentPosition = 0

eval(Player).Stop()

eval(Player).FileName = ''

MPlayer.style.visibility = "hidden"

MaskPreIMG.style.visibility = "visible"

isstop = true

isplaying = false

ispause = false

}

}

function DoPause()

{

if (isplaying)

{

eval(Player).Pause()

isplaying = false

ispause = true

isstop = false

}

}

function SetSource(srcname)

{

isplaying = true

ispause = false

isstop = false

filename = srcname

eval(Player).FileName = srcname

MaskPreIMG.style.visibility = "hidden"

MaskIMG.style.visibility = "hidden"

MPlayer.style.visibility = "visible"

}

// 全屏 setting=3

// 100% setting=0

// 50% setting=1

// 200% setting=2

function SetDisplaySize(setting)

{

if (isplaying)

eval(Player).DisplaySize = setting

}

-->

</SCRIPT>

<SCRIPT language=JScript event=EndOfStream(lResult) for=NSPlay>

DoStop()

</SCRIPT>

<SCRIPT language=JavaScript event=Buffering(bStart) for=NSPlay>

if (bStart == 0){

//alert(BufferingProgress)

MPlayer.style.visibility = "visible"

MaskIMG.style.visibility = "hidden"

MaskPreIMG.style.visibility = "hidden"

}

else{

//alert(1)

MPlayer.style.visibility = "hidden"

MaskIMG.style.visibility = "visible"

MaskPreIMG.style.visibility = "hidden"

}

</SCRIPT>

<SCRIPT language=JavaScript type=text/JavaScript>

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidthdocument.MM_pgH=innerHeightonresize=MM_reloadPage}}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload()

}

MM_reloadPage(true)

//-->

</SCRIPT>

<SCRIPT language=JavaScript>

var playitem = 0

function SetVideoSourcebak(sel)

{

DoStop()

adimage.style.visibility = "visible"

MPlayer.style.visibility = "hidden"

playitem = sel

setTimeout("beginplay()",5000)

}

function beginplay()

{

adimage.style.visibility = "hidden"

MPlayer.style.visibility = "visible"

SetSource('mms://'+videourl[playitem])

}

function SetVideoSource(sel)

{

SetSource('mms://'+videourl[sel])

}

</SCRIPT>

<!--视频广告消除-->

<SCRIPT language=Javascript>

function disablead()

{

adimage.style.visibility = "hidden"

}

//setTimeout("disablead()",5000)

</SCRIPT>

</body>

</html>