html5为你的网页添加视频播放器
在html5中通过video标签为网页添加视频播放功能。
video元素支持三种视频格式：ogg,mpeg4,webm
Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件
MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件
WebM=带有VP8视频编码和Vorbis音频编码的WebM文件
以下是video标签的相关属性。
autoplayautoplay如果出现该属性，则视频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。
preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
srcurl要播放的视频的URL。
widthpixels设置视频播放器的宽度。下面是一个小实例：
<!DOVTYPEhtml>
<html>
<head>
<title>我爱学习</title>
</head>
<body>
<videocontrols="controls">
<sourcesrc="song.ogg"type="audio/ogg">
<sourcesrc="song.mp3"type="audio/mpeg">
Yourbrowserdoesnotsupporttheaudiotag.
</video>
</body>
</html>
<IFRAME style="WIDTH: 592pxHEIGHT: 204px" src="包含视频的网页．htm" frameBorder=1 scrolling=yes></IFRAME>在网页插入视频播放器代码
一、插入RealPlayer ActiveX对象（如果要进行测试，需要先安装RealPlayer播放器）
假定以下代码包含在video.php文档中（该文件将在主页面中通过<iframe>进行链接）。
<object width="320" height="250" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<param name="CONTROLS" value="ImageWindow">
<param name="CONSOLE" value="Video">
<param name="CENTER" value="TRUE">
<param name="MAINTAINSPECT" value="TRUE">
</object>//定义播放界面
<object width="320" height="30" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<param name="CONTROLS" value="StatusBar">
<param name="CONSOLE" value="Video">
</object>//定义状态栏
<object width="320" height="30" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<param name="CONTROLS" value="ControlPanel"><param name="CONSOLE" value="Video">
<param name="SRC" value="<?php echo getsrc()?>">
<param name="AUTOSTART" value="TRUE">
<param name="PREFETCH" value="0">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
</object>//定义控制面板
其中，CONTROLS参数用来指定播放器的控件外观，可以用多个控件进行组合，并通过CONSOLE参数进行关联。
有关param参数，读者可以参阅RealPlayer官方网站http://service.real.com/help/library/guides/production/htmfiles/control.htm。
这里的SRC参数尤为重要，用来指定视频流文件的URL地址。这里笔者使用PHP代码的方法动态的指定SRC，读者也可以使用其它如ASP，或完全过 JavaScript 实现。
二、使用DHTML动态控制RealPlayer控件的播放
小技巧：<IFRAME>的妙用。由于为RealPlayer控件指定新的SRC需要刷新页面，使用<IFRAME>可以把RealPlayer控件嵌入到单独的页面中，这样，动态刷新就是在<IFRAME>内进行，不会影响用户观看页面其它内容。
以下代码包含在主页面中：
<IFRAME id="iVideo" SRC="video.php" Width=500 Height=345 frameborder=0 SCROLLING="no">
</IFRAME>，其中，video.php文件用力显示RealPlayer控件。
下面我们加入简单的JavaScript 代码用来控制视频的播放。
<script language="JavaScript">
function play(filename){
top.document.all("iVideo").src = "video.php?src="+filename
} // iVideo 是刚刚定义的IFRAME 的标识符
</script>
我们可以使用javascript控制RealPlayer插件更复杂的功能，如提取视频的长宽、测试用户的网络速率、自定义播放事件等等。关于RealPlayer ActiveX开发的具体细节，请参阅RealPlayer官方网站http://service.real.com/help/library/guides/extend/embed.htm。
我们假设有一个视频文件，其URL为http://YourURL/filename.ram，那么我们就可以这样定义：
<a href="JavaScript:play('http://YourURL/filename.ram')">文件1</a>，如果文件是在本地，URL也可以为相对路径。
三、检测用户是否安装RealPlayer播放器
在页面的<head></head>部分加入以下JavaScript代码，用以检测用户是否安装RealPlayer播放器：
<SCRIPT LANGUAGE=JavaScript>
<!--
var RealMode=0
var RealPlayer5=0
var RealPlayer4=0
var RealPlayerG2=0
if (navigator.userAgent.indexOf("MSIE")<0 ){
numPlugins = navigator.plugins.length
for (i = 0i <numPluginsi++){
plugin = navigator.plugins[i]
if (plugin.name.substring(0,10)=="RealPlayer"){
RealMode=1
}
}
}
//以下代码通过VBScript的CreateObject()函数动态的创建RealPlayer对象
document.write('<SCRIPT LANGUAGE=VBScript\>\n')
document.write('on error resume next \n')
document.write('RealPlayerG2 = (NOT IsNull(CreateObject("rmocx.RealPlayer G2 Control")))\n')
document.write('RealPlayer5 = (NOT IsNull(CreateObject("RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)")))\n')
document.write('RealPlayer4 = (NOT IsNull(CreateObject("RealVideo.RealVideo(tm) ActiveX Control (32-bit)")))\n')
document.write('</SCRIPT\>\n')
if ( RealPlayerG2 || RealPlayer5 || RealPlayer4 ){
//可以在此处添加<object>对象
}else if ( RealMode ){ //NetScape浏览器用户
//可以在此处加入<embed>对象
}else
{
window.location.replace("install.htm")//转入install.htm页面指导用户进行安装
}
-->
</Script>
四、应用实例
<object classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA width=300 height=225>
<param name=src value=../kjsk/img/sp1.rm>
<param name=console value=clip1><param name=controls value=imagewindow>
<param name=autostart value=true>
<embed src="../kjsk/img/sp1.rm" width="300" height="225" autostart="true" console="clip1" controls="imagewindow"></embed>
</object>
<br>
<object classid=clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa height=32 width=300>
<param name=src value=../kjsk/img/sp1.rm>
<param name=controls value=controlpanel>
<param name=console value=clip1>
<embed src="../kjsk/img/sp1.rm" width="300" height="32" controls="controlpanel" console="clip1"></embed>
</object>
Imports System.Text.RegularExpressions '正则表达式Public Class 视频播放器
Private 文件路径 As String
Private Sub 视频播放器_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Me.AllowDrop = True '支持文件拖拽
Me.Width = 920
Me.Height = 630
End Sub
Private Sub 视频播放器_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Me.DragEnter
Try
If e.Data.GetDataPresent(DataFormats.FileDrop) = True Then
e.Effect = DragDropEffects.Copy
Else
e.Effect = DragDropEffects.None
End If
Catch ex As Exception
MessageBox.Show(ex.Message)
End Try
End Sub
Private Sub 视频播放器_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Me.DragEnter
Try
Dim filepaht As String() = e.Data.GetData(DataFormats.FileDrop)
For Each File As String In filepaht
文件路径 = File
'播放音乐文件
Dim 文件名 As String = 文件路径.Substring(文件路径.LastIndexOf("\") + 1)
If InStr(1, 文件路径, ".flv", 1) Or InStr(1, 文件路径, ".mp3", 1) Then
WebBrowser1.Url = New Uri("E:\usr\www\ckplayer6.4\demo.htm")
Else
MsgBox("不是支持的视频文件,无法播放!")
End If
Next
Catch ex As Exception
MessageBox.Show(ex.Message)
End Try
End Sub
Private Sub WebBrowser1_DocumentCompleted(ByVal sender As System.Object, ByVal e As System.Windows.Forms.WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
Refresh()
End Sub
End Class
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）