如何使网页播放视频

网页上嵌入视频的方法有好多，网上也有大量的方法，有些不能用，有些不实用，要么就是密密麻麻的代码。

我最近看过的有大约三种用过：

1、将视频传到优酷上，在优酷上获得连接ID，连到自己的网站 (个人喜欢这个，因为不占自己的带宽，有可能有广告，但是也可以想办法去掉)

2、在网页上直接嵌入自身系统或者网络资源的视频

3、使用html5的标签<video>，类似于第一种。

下面通过例子说明三个方法的使用：

1、将视频传到优酷上，在优酷上获得连接ID，连到自己的网站

下面两种方式连接，有广告，但是不会影响视频初始关键帧的效果。

<embed src=' http://player.youku.com/player.php/sid/XNDE4ODM2MDAw/v.swf&ShowRelatedVideo=false'
      quality='high' height="375px" width="665px″ align='middle' allowScriptAccess='sameDomain'
      type='application/x-shockwave-flash'>
     </embed>
    
     <embed type="application/x-shockwave-flash
     " src=" http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XNDE4ODM2MDA&isAutoPlay=false&ShowRelatedVideo=false"
     id="movie_player" name="movie_player" bgcolor="#FFFFFF"
     quality="high" wmode="transparent" allowfullscreen="true"
   
     height="375px" width="665px″>
    </embed>
   

没有广告如下

     <embed type="application/x-shockwave-flash" src=" http://static.youku.com/v1.0.0201/v/swf/qplayer_taobao.swf?VideoIDS=XNDE4ODM2MDAw=&isAutoPlay=false&isShowRelatedVideo=false&embedid=-&showAd=0" id="movie_player" name="movie_player" bgcolor="#FFFFFF" quality="high" wmode="transparent" allowfullscreen="true"
    flashvars="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MM
    Control=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999"
    pluginspage=" http://www.macromedia.com/go/getflashplayer" height="375px" width="665px″></embed>

注释：上面src的属性  加粗加大暗红色部分是从优酷得到的视频的ID值，这个id是在youku播放目标视频的时候，地址栏中的一部分，截取方法如下： http://v.youku.com/v_show/id_XNDIzNDA5NzU2.html?f=17811344 。截取id_之后的到.html之前的部分。

2、直接使用<embed>标签(可以直接使用、通用的)

代码:
<object title="dvubb" align="middle" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" class="object" id="MediaPlayer" width="480" height="360">
<param name="AUTOSTART" value="false"/>
<param name="ShowStatusBar" value="-1"/>
<param name="Filename" value="你的视拼地址"/>
<embed title="dvubb" type="application/x-oleobject" codebase=" http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" flename="mp" src="你的视频地址" width="480" height="360" autoplay="false"></embed>
</object>
上面的这个播放器是老式的那种，6.4版本!新式播放器是在WMP9.0以后出现的，也就是说只有装了9.0或9.0以上的播放器才能正常使用的
新式播放器代码，相对以前的来说要简单很多:

代码:
<object height="64" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" align="center" border="0"><param name="AutoStart" value="0"><param name="Balance" value="0"><param name="enabled" value="-1"><param name="EnableContextMenu" value="-1"><param name="url" value="{1}"><param name="PlayCount" value="1"><param name="rate" value="1"><param name="currentPosition" value="0"><param name="currentMarker" value="0"><param name="defaultFrame" value=""><param name="invokeURLs" value="0"><param name="baseURL" value=""><param name="stretchToFit" value="0"><param name="volume" value="100"><param name="mute" value="0"><param name="uiMode" value="mini"><param name="windowlessVideo" value="-1"><param name="fullScreen" value="0"><param name="enableErrorDialogs" value="-1"><param name="SAMIStyle" value><param name="SAMILang" value><param name="SAMIFilename" value><param name="captioningID" value></object>

Real系列播放器
代码:
<object classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="500" height="40" id="RealMoviePlayer" border="0"><param name="_ExtentX" value="13229"><param name="_ExtentY" value="1058"><param name="AUTOSTART" value="0"><param name="SHUFFLE" value="0"><param name="PREFETCH" value="0"><param name="NOLABELS" value="0"><param name="CONTROLS" value="controlpanel"><param name="CONSOLE" value="_master"><param name="LOOP" value="0"><param name="NUMLOOP" value="0"><param name="CENTER" value="0"><param name="MAINTAINASPECT" value="0"><param name="BACKGROUNDCOLOR" value="#000000"><param name="SRC" value="REAL媒体文件地址"></object>

Flash播放器
代码:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=" http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400"><param name="allowScriptAccess" value="sameDomain"><param name="movie" value="flash动画地址"><param name="quality" value="high"><param name="bgcolor" value="#ffffff"><embed src="flash动画地址" quality="high" bgcolor="#ffffff" width="550" height="400" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" http://www.macromedia.com/go/getFlashplayer" /></object>

万能自动网页播放器代码（ 简单）
代码:
<embed src="媒体文件URL地址" width=400 height=300 type="audio/mpeg" loop="-1" autostart="false" volume="0" style=""></embed>
WIDTH代表播放器宽度，HEIGHT代表高度，后面的数值可依自己喜好进行调整；
AUTOSTART="TRUE"或者是autoplay="true" 这里TRUE代表自动播放，如果换成FALSE则代表手动播放；
LOOP="TRUE"代表循环播放；
style=“”代表风格，参数可以参考CSS滤镜，可以省略；
type 可以省略；
其他可以看EMBED的代码详细；Flash 的代码就不详细说了！因为有些在线的Flash MP3 player但是经常会有些问题本来想给论坛加个Flash的MP3播放器按钮因为效果太差放弃了，使用万能代码了！

3、使用video标签：

<video id="video" class="video-js vjs-default-skin" controls preload="none" width="665" height="375" poster="images/video/poster.jpg" data-setup="{}">
                    <source src="images/video/video.mp4" type='video/mp4' />
                    <source src=" http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
                    <source src=" http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
                    <track kind="captions" src="captions.vtt" srclang="en" label="English" />
                </video>