html object mp4

相關內容簡體繁體

本文轉載自查看原文 2013-01-24 15:54 12935 HTML&JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

Quicktime是一個跨瀏覽器的播放插件，可以實現RTSP視頻直播，可用於電視直播或視頻監控平台。本文主要講了關於播放器如何實現直播、事件響應、播放器全屏、動態修改播放路徑等問題。

需要准備的軟件：quicktime安裝文件、RTSP模擬器（或VLC播放器）。
以下是我的實現方式：

1. 播放器HTML靜態代碼

 
              01 
              <div id="player"> 
             
              02 
                <!--[if IE]><object id="qt_event_source" classid="clsid:CB927D12-4FF7-4a9e-A169-56E4B8A75598" style="display:none;"></object><![endif]--> 
             
              03 
                <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="640" height="480"codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=7,6,9,0" standby="控件加載中..." name="QT_OBJ" id="QT_OBJ"style="behavior:url(#qt_event_source);overflow:hidden;"> 
             
              04 
                  <param name="src" value="ress/preview.mov"/> 
             
              05 
                  <!-- <param name="qtsrc" value="rtsp://"/> --> 
             
              06 
                  <param name="enablejavascript" value="true"/> 
             
              07 
                  <param name="postdomevents" value="true"/> 
             
              08 
                  <param name="controller" value="false"/> 
             
              09 
                  <param name="scale" value="tofit"/> 
             
              10 
                  <param name="kioskmode" value="true"/> 
             
              11 
                  <param name="bgcolor" value="#000000"/> 
             
              12 
                  <param name="qtsrcdontusebrowser" value="true"/> 
             
              13 
                  <param name="cache" value="false"/> 
             
              14 
                  <!-- qtsrc=""  --> 
             
              15 
                  <embed src="ress/preview.mov" width="640" height="480" pluginspage="http://www.apple.com/quicktime/download/"name="QT_EMB" id="QT_EMB" enablejavascript="true" postdomevents="true" controller="false" scale="tofit" kioskmode="true"bgcolor="#000000" qtsrcdontusebrowser="true" cache="false" style="overflow:hidden;"></embed> 
             
              16 
                </object> 
             
              17 
              </div>

代碼說明：
1. object 用於IE瀏覽器，而 embed 用於非IE瀏覽器；
2. qt_event_source 對象是為了給IE瀏覽器注冊事件，通過style（ style="behavior:url(#qt_event_source);overflow:hidden;"）綁定行為；
3. src="ress/preview.mov" 用於在頁面加載后初始化控件，因為在上述代碼中沒有初始化 qtsrc 直播路徑（便於動態切換播放路徑）；

4. kioskmode="true" 隱藏播放器右鍵菜單。

2. Javascript代碼實現（部分）

view source 
             
print?

 
              001 
              var Player = { 
             
              002 
                  /** 
             
              003 
                   * 播放器對象 
             
              004 
                   */ 
             
              005 
                  object : null, 
             
              006 
                  stream : { 
             
              007 
                      /** 
             
              008 
                       * 視頻初始化原始寬度 
             
              009 
                       */ 
             
              010 
                      width : 640, 
             
              011 
                      /** 
             
              012 
                       * 視頻初始化原始高度 
             
              013 
                       */ 
             
              014 
                      height : 480 
             
              015 
                  }, 
             
              016 
                  /** 
             
              017 
                   * 設置播放路徑 
             
              018 
                   * 
             
              019 
                   * @param url 
             
              020 
                   */ 
             
              021 
                  setPlayerParameters : function(url) { 
             
              022 
                      try { 
             
              023 
                          if (Player.object) { 
             
              024 
                              var qt = Player.object; 
             
              025 
                              if (!$.browser.msie && !qt.SetURL) { 
             
              026 
                                  return this; 
             
              027 
                              } 
             
              028 
                              qt.SetURL(url); 
             
              029 
                              qt.SetControllerVisible(false); 
             
              030 
                              qt.SetKioskMode(true); 
             
              031 
                              qt.SetVolume(100); 
             
              032 
                              qt.SetBgColor('#ffffff'); 
             
              033 
                          } 
             
              034 
                      } catch (e) { 
             
              035 
                          alert('resetPlayerParameters - ' + e.toString()); 
             
              036 
                      } 
             
              037 
                      return this; 
             
              038 
                  }, 
             
              039 
                  /** 
             
              040 
                   * 設置播放速率 
             
              041 
                
              042 
                   * 實現實時播放 
             
              043 
                   */ 
             
              044 
                  setRate : function() { 
             
              045 
                      if (Player.object) 
             
              046 
                          Player.object.SetRate(10); 
             
              047 
                  }, 
             
              048 
                  /** 
             
              049 
                   * 初始化播放路徑，如：rtsp://192.168.0.100:554/3 
             
              050 
                   * 
             
              051 
                   * @param stream 
             
              052 
                   * @returns 
             
              053 
                   */ 
             
              054 
                  initGUrl : function(stream) { 
             
              055 
                      var host = location.hostname; 
             
              056 
                      var port = '';// ':'+554; 
             
              057 
                      var url = [ 'rtsp://', host, port, '/', stream ].join(''); 
             
              058 
                      return url; 
             
              059 
                  }, 
             
              060 
                  /** 
             
              061 
                   * 注冊事件,為IE瀏覽器注冊時要多加個'on'在事件前面 
             
              062 
                   */ 
             
              063 
                  regQuickTimeEvents : function() { 
             
              064 
                      var listerners = Player.listerners; 
             
              065 
                      if (document.addEventListener) { 
             
              066 
                          var obj = document.QT_EMB; 
             
              067 
                          if (obj) { 
             
              068 
                              Player.object = obj; 
             
              069 
                              obj.addEventListener("qt_timechanged", 
             
              070 
                                      listerners._qt_timechanged_listerner); 
             
              071 
                              obj.addEventListener("qt_stalled", 
             
              072 
                                      listerners._qt_stalled_listerner); 
             
              073 
                              obj 
             
              074 
                                      .addEventListener("qt_error", 
             
              075 
                                              listerners._qt_error_listerner); 
             
              076 
                          } 
             
              077 
                      } else { 
             
              078 
                          var obj = document.QT_OBJ; 
             
              079 
                          if (obj) { 
             
              080 
                              Player.object = obj; 
             
              081 
                              obj.attachEvent("onqt_timechanged", 
             
              082 
                                      listerners._qt_timechanged_listerner); 
             
              083 
                              obj.attachEvent("onqt_stalled", 
             
              084 
                                      listerners._qt_stalled_listerner); 
             
              085 
                              obj.attachEvent("onqt_error", listerners._qt_error_listerner); 
             
              086 
                          } 
             
              087 
                      } 
             
              088 
                      return this; 
             
              089 
                  }, 
             
              090 
                  listerners : { 
             
              091 
                      _qt_timechanged_listerner : function() { 
             
              092 
                          if (Player.object) { 
             
              093 
                              var qt = Player.object; 
             
              094 
                              if (!$.browser.msie && !qt.SetRate) { 
             
              095 
                                  return false; 
             
              096 
                              } 
             
              097 
                              // 通過設置播放率快速播放來消耗緩存達到實時播放 
             
              098 
                              qt.SetRate(10); 
             
              099 
                              qt.SetBgColor('#000000'); 
             
              100 
                              Player.getStreamWidthHeight(qt, true); 
             
              101 
                              Player.adaptation(); 
             
              102 
                          } 
             
              103 
                      }, 
             
              104 
                      _qt_stalled_listerner : function() { 
             
              105 
                          alert('連接已終斷，正在嘗試重新連接...'); 
             
              106 
                      }, 
             
              107 
                      _qt_error_listerner : function() { 
             
              108 
                          alert('播放時發生錯誤，請刷新頁面或重新登錄來解決此問題！'); 
             
              109 
                      } 
             
              110 
                  }, 
             
              111 
                  /** 
             
              112 
                   * 將視頻填充到當前播放器大小一致,並維持原始長寬比 
             
              113 
                
              114 
                   * SetRectangle參數中每個值都必須是整形，不能有小數 在計算時可能出現高度或寬度相差一個像素 
             
              115 
                   */ 
             
              116 
                  adaptation : function() { 
             
              117 
                      try { 
             
              118 
                          if (!Player.object) 
             
              119 
                              return false; 
             
              120 
                          var object = Player.object; 
             
              121 
                          var qt = $(object); 
             
              122 
                          var w_box = qt.width(); 
             
              123 
                          var h_box = qt.height(); 
             
              124 
                          var wh = Player.getStreamWidthHeight(object, false); 
             
              125 
                          if (!wh) 
             
              126 
                              return false; 
             
              127 
                          var w_per = wh.width || 640; 
             
              128 
                          var h_per = wh.height || 480; 
             
              129 
                          var rect = [ 0, 0, 640, 480 ]; 
             
              130 
                          var dw = w_per / w_box; 
             
              131 
                          var dh = h_per / h_box; 
             
              132 
                          if (dw == dh) { 
             
              133 
                              rect[2] = parseInt(w_box); 
             
              134 
                              rect[3] = parseInt(h_box); 
             
              135 
                          } else if (dw > dh) { 
             
              136 
                              var h_per_new = h_per / dw; 
             
              137 
                              var offset = (h_box - h_per_new) / 2; 
             
              138 
                              rect[1] = parseInt(offset); 
             
              139 
                              rect[2] = parseInt(w_box); 
             
              140 
                              rect[3] = parseInt(h_per_new + offset); 
             
              141 
                          } else { 
             
              142 
                              var w_per_new = w_per / dh; 
             
              143 
                              var offset = (w_box - w_per_new) / 2; 
             
              144 
                              rect[0] = parseInt(offset); 
             
              145 
                              rect[2] = parseInt(w_per_new + offset); 
             
              146 
                              rect[3] = parseInt(h_box); 
             
              147 
                          } 
             
              148 
                          if (!$.browser.msie && !object.SetRectangle) { 
             
              149 
                              return false; 
             
              150 
                          } 
             
              151 
                          object.SetRectangle(rect.join(',')); 
             
              152 
                      } catch (e) { 
             
              153 
                          // TODO 
             
              154 
                      } 
             
              155 
                  }, 
             
              156 
                  /** 
             
              157 
                   * 獲取播放器對象的高度和寬度 
             
              158 
                   * 
             
              159 
                   * @param playerObj 
             
              160 
                   * @param isInit 
             
              161 
                   *            是否將 Player.stream中的參數重寫 
             
              162 
                   * @returns 
             
              163 
                   */ 
             
              164 
                  getStreamWidthHeight : function(playerObj, isFlash) { 
             
              165 
                      try { 
             
              166 
                          if (!playerObj) 
             
              167 
                              return false; 
             
              168 
                          if (!$.browser.msie && !playerObj.GetRectangle) { 
             
              169 
                              return false; 
             
              170 
                          } 
             
              171 
                          var rect = playerObj.GetRectangle().split(','); 
             
              172 
                          var width = parseInt(rect[2]) - parseInt(rect[0]); 
             
              173 
                          var height = parseInt(rect[3]) - parseInt(rect[1]); 
             
              174 
                          if (isFlash) { 
             
              175 
                              this.stream.width = width; 
             
              176 
                              this.stream.height = height; 
             
              177 
                          } 
             
              178 
                          return { 
             
              179 
                              width : width || this.stream.width, 
             
              180 
                              height : height || this.stream.height 
             
              181 
                          }; 
             
              182 
                      } catch (e) { 
             
              183 
                          // TODO 
             
              184 
                      } 
             
              185 
                  }, 
             
              186 
                  /** 
             
              187 
                   * @param{Object} el 被放大對象 
             
              188 
                   */ 
             
              189 
                  requestFullScreen : function(el) { 
             
              190 
                      var agent = '';// TODO 獲取瀏覽器名稱 
             
              191 
                      var obj = $(el); 
             
              192 
                        
              193 
                      // 支持大多數瀏覽器全屏功能，除了FCK IE！ 
             
              194 
                      var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
             
              195 
                              || el.mozRequestFullScreen || el.msRequestFullScreen; 
             
              196 
                        
              197 
                      if (requestMethod) { 
             
              198 
                          requestMethod.call(el); 
             
              199 
                          var stream = Player.stream; 
             
              200 
                          el.SetRectangle([ 0, 0, stream.width, stream.height ].join(',')); 
             
              201 
                          obj.width(window.screen.width); 
             
              202 
                          obj.height(window.screen.height); 
             
              203 
                
              204 
                          // 根據不同瀏覽器作相應調整 
             
              205 
                          if (agent.name == 'safari') { 
             
              206 
                              obj.offset({ 
             
              207 
                                  top : 0, 
             
              208 
                                  left : 0 
             
              209 
                              }); 
             
              210 
                          } 
             
              211 
                      } else { 
             
              212 
                          // 如果瀏覽器沒有全屏接口就放大顯示區 
             
              213 
                          // TODO 
             
              214 
                      } 
             
              215 
                  } 
             
              216 
              };

代碼說明：

1. 上述代碼並不完整，需要根據實際情況作相應調整；
2. 基本使用方式：Player.regQuickTimeEvents().setPlayerParameters(url)；
3. Quicktime在播放RTSP時會有3-5秒延遲，這是緩存所至，但控件沒有提供相應清空緩存方法，只有通過SetRate()來設置播放速率來清除緩存。

可能出現的問題：
1. 在顯示/隱藏播放控件、全屏/恢復時會導致重新加載視頻；

4. Quicktime插件函數列表

AddCuePoint(time, fcnName, pause)	void
Clear()	void
GetAutoPlay()	Number
GetBgColor()	String	獲取播放器背景顏色
GetChapterCount()	Number
GetChapterName(chapterNum)	String
GetComponentVersion(type, subType, manufacturer)	String
GetControllerVisible()	Number
GetCurrentChapterIndex()	Number
GetDuration()	Number
GetEndTime()	Number
GetFieldOfView()	Number
GetHotspotTarget(hotspotID)	String
GetHotspotUrl(hotspotID)	String
GetHREF()	Number
GetIsLooping()	Number
GetIsQuickTimeRegistered()	Number
GetIsVRMovie()	Number
GetKioskMode()	Number
GetLanguage()	String
GetLoopIsPalindrome()	Number
GetMatrix()	String
GetMaxBytesLoaded()	Number
GetMaxTimeLoaded()	Number
GetMIMEType()	String
GetMovieID()	Number
GetMovieName()	String
GetMovieSize()	Number
GetMute()	Number
GetNodeCount()	Number
GetNodeID()	Number
GetPanAngle()	Number
GetPlayEveryFrame()	Number
GetPluginStatus()	String
GetPluginVersion()	String
GetQTNEXTUrl(index)	String
GetQuickTimeConnectionSpeed()	Number
GetQuickTimeLanguage()	String
GetQuickTimeVersion()	String
GetRate()	Number
GetRectangle()	String
GetResetPropertiesOnReload()	Number
GetSpriteTrackVariable(trackIndex, variableIndex)	String
GetStartTime()	Number
GetTarget()	String
GetTiltAngle()	Number
GetTime()	Number
GetTimeScale()	Number
GetTrackCount()	Number
GetTrackEnabled(index)	Number
GetTrackName(index)	String
GetTrackType(index)	String
GetURL()	String
GetUserData(type)	String
GetVolume()	Number
GoPreviousNode()	void
GoToChapter(chapterName)	void
Hide()	void
Play()	void
RemoveCuePoint(time, fcnName)	void
Rewind()	void
SendSpriteEvent(trackIndex, spriteID, messageID)	void
SetAutoPlay(autoPlay)	void
SetBgColor(color)	void
SetControllerVisible(visible)	void
SetCurrentChapterIndex(chapterIndex)	void
SetEndTime(time)	void
SetFieldOfView(fov)	void
SetHotspotTarget(hotspotID, target)	void
SetHotspotUrl(hotspotID, url)	void
SetHREF(url)	void
SetIsLooping(loop)	void
SetKioskMode(kioskMode)	void
SetLanguage(language)	void
SetLoopIsPalindrome(loop)	void
SetMatrix(matrix)	void
SetMovieID(movieID)	void
SetMovieName(movieName)	void
SetMute(mute)	void
SetNodeID(id)	void
SetPanAngle(angle)	void
SetPlayEveryFrame(playAll)	void
SetQTNEXTUrl(index, url)	void
SetRate(rate)	void	設置播放速度。可設置較大速度以此作清除緩存的輔助工具。
SetRectangle(rect)	void	設置顯示畫面大小和位置。
SetResetPropertiesOnReload(reset)	void
SetSpriteTrackVariable(trackIndex, variableIndex, value)	void
SetStartTime(time)	void
SetTarget(target)	void
SetTiltAngle(angle)	void
SetTime(time)	void
SetTrackEnabled(index, enabled)	void
SetURL(url)	void
SetVolume(volume)	void
Show()	void
ShowDefaultView()	void
Step(count)	void
Stop()	void

MediaPlayer代碼測試，使用JS控制播放，復制下面代碼，新建網頁就可以進行測試。（后面在“其他播放器最后還有相關介紹”）

大於等於0-->
  <param name="CurrentMarker" value="0">
  <param name="DefaultFrame" value>
  <param name="DisplayBackColor" value="0">
  <param name="DisplayForeColor" value="16777215">
  <param name="DisplayMode" value="0">
  <param name="DisplaySize" value="0">
  
  <param name="Enabled" value="-1">
  <param name="EnableContextMenu" value="-1">
  <!-是否用右鍵彈出菜單控制-->
  <param name="EnablePositionControls" value="-1">
  <param name="EnableFullScreenControls" value="-1">
  <param name="EnableTracker" value="-1">
  
  <param name="Filename" value="http://www.fth.com/UploadFile/070715035913.wma" valuetype="ref">
  <param name="InvokeURLs" value="-1">
  <param name="Language" value="-1">
  <param name="Mute" value="0">
  
  <param name="PlayCount" value="10">
  
  <param name="PreviewMode" value="-1">
  <param name="Rate" value="1">
  
  <param name="SAMILang" value>
  <param name="SAMIStyle" value>
  <param name="SAMIFileName" value>
  
  <param name="SelectionStart" value="-1">
  <param name="SelectionEnd" value="-1">
  <param name="SendOpenStateChangeEvents" value="-1">
  <param name="SendWarningEvents" value="-1">
  <param name="SendErrorEvents" value="-1">
  <param name="SendKeyboardEvents" value="0">
  <param name="SendMouseClickEvents" value="0">
  <param name="SendMouseMoveEvents" value="0">
  <param name="SendPlayStateChangeEvents" value="-1">
  <param name="ShowCaptioning" value="0">
  
  <param name="ShowControls" value="-1">
  
  <param name="ShowAudioControls" value="-1">
  
  <param name="ShowDisplay" value="0">
  
  <param name="ShowGotoBar" value="0">
  
  <param name="ShowPositionControls" value="-1">
  
  <param name="ShowStatusBar" value="-1">
  
  <param name="ShowTracker" value="-1">
  
  <param name="TransparentAtStart" value="-1">
  <param name="VideoBorderWidth" value="0">
  <!--顯示部的寬部,如果小於視頻寬,則最小為視頻寬,或者加大到指定值,並自動加大高度.此改變只改變

四周的黑框大小,不改變視頻大小-->
  <param name="VideoBorderColor" value="0">
  
  <param name="VideoBorder3D" value="0">
  <param name="Volume" value="0">
  
  <param name="WindowlessVideo" value="0">
  
  </object>
  <br>
  <b>播放控制:</b><br>
  音樂切換:
  <input type="button" onclick="mp.Filename='http://www.fzl43.com/upload/2007_09/07090821519958.wma'" value="生命要繼續">
  <input type="button" onclick="mp.Filename='http://www.fth.com/UploadFile/070715035913.wma'" value="我們的歌">
  <input type="button" onclick="alert(mp.Filename)" value="當前曲目">
  <br>
  播放控制:
  <input type="button" onclick="mp.play()" value="播放">
  <input type="button" onclick="mp.pause()" value="暫停">
  <input type="button" onclick="mp.pause();mp.CurrentPosition=0" value="停止">
  <br>
  聲道控制:
  <input type="button" onclick="mp.Balance=9640" value="左聲道">
  <input type="button" onclick="mp.Balance=0" value="立體聲">
  <input type="button" onclick="mp.Balance=-9640" value="右聲道">
  <input type="button" onclick="alert(mp.Balance)" value="當前狀態">
  <br>
  進度控制:
  <input type="button" onclick="mp.CurrentPosition=0" value="回到開始">
  <input type="button" onclick="mp.CurrentPosition+=60" value="快進一分鍾">
  <input type="button" onclick="mp.CurrentPosition-=60" value="快退一分鍾">
  <input type="button" onclick="alert(mp.Duration)" value="總長度">
  <input type="button" onclick="alert(mp.CurrentPosition)" value="當前進度">
  <br>
  音量控制:
  <script language="javascript">
  function setVolume(num)
  {
  var mp=document.getElementByIdx("mp")
  tnum=mp.Volume+num
  if(tnum>0){tnum=0}
  if(tnum<-10000){tnum=-10000}
  mp.Volume=tnum
  }
  </script>
  <input type="button" onclick="setVolume(200)" value="音量+">
  <input type="button" onclick="setVolume(-200)" value="音量-">
  <input type="button" onclick="mp.Volume=0" value="最大">
  <input type="button" onclick="mp.Volume=-10000" value="最小">
  <input type="button" onclick="mp.Mute=-1" value="靜音">
  <input type="button" onclick="mp.Mute=0" value="取消靜音">
  <input type="button" onclick="alert(mp.Volume)" value="當前音量">
  <br>
  速度控制:
  <input type="button" onclick="if(mp.Rate<2){mp.Rate+=0.1}" value="加速">
  <input type="button" onclick="if(mp.Rate>0.2){mp.Rate-=0.1}" value="減速">
  <input type="button" onclick="mp.Rate=1" value="正常">
  <input type="button" onclick="alert(mp.Rate)" value="當前速度">
  <br><b>界面控制:</b><br>
  字幕控制:
  <input type="button" onclick="mp.ShowCaptioning=-1" value="顯示">
  <input type="button" onclick="mp.ShowCaptioning=0" value="隱藏">
  <input type="button" onclick="alert(mp.ShowCaptioning)" value="當前狀態">
  <br>
  音量控制:
  <input type="button" onclick="mp.ShowAudioControls=-1" value="顯示">
  <input type="button" onclick="mp.ShowAudioControls=0" value="隱藏">
  <input type="button" onclick="alert(mp.ShowAudioControls)" value="當前狀態">
  <br>
  播放控制:
  <input type="button" onclick="mp.ShowControls=-1" value="顯示">
  <input type="button" onclick="mp.ShowControls=0" value="隱藏">
  <input type="button" onclick="alert(mp.ShowControls)" value="當前狀態">
  <br>
  媒體信息:
  <input type="button" onclick="mp.ShowDisplay=-1" value="顯示">
  <input type="button" onclick="mp.ShowDisplay=0" value="隱藏">
  <input type="button" onclick="alert(mp.ShowDisplay)" value="當前狀態">
  <br>
  GotoBar :
  <input type="button" onclick="mp.ShowGotoBar=-1" value="顯示">
  <input type="button" onclick="mp.ShowGotoBar=0" value="隱藏">
  <input type="button" onclick="alert(mp.ShowGotoBar)" value="當前狀態">
  <br>
  狀態欄:
  <input type="button" onclick="mp.ShowStatusBar=-1" value="顯示">
  <input type="button" onclick="mp.ShowStatusBar=0" value="隱藏">
  <input type="button" onclick="alert(mp.ShowStatusBar)" value="當前狀態">
  <br>
  跟蹤條:
  <input type="button" onclick="mp.ShowTracker=-1" value="顯示">
  <input type="button" onclick="mp.ShowTracker=0" value="隱藏">
  <input type="button" onclick="alert(mp.ShowTracker)" value="當前狀態">
  <br>
  位置控制:
  <input type="button" onclick="mp.ShowPositionControls=-1" value="顯示">
  <input type="button" onclick="mp.ShowPositionControls=0" value="隱藏">
  <input type="button" onclick="alert(mp.ShowPositionControls)" value="當前狀態">
  <br>
  窗口縮放:
  <input type="button" onclick="mp.DisplaySize=1" value="50%">
  <input type="button" onclick="mp.DisplaySize=0" value="100%">
  <input type="button" onclick="mp.DisplaySize=2" value="200%">
  <input type="button" onclick="mp.DisplaySize=3" value="全屏">
  <input type="button" onclick="alert(mp.DisplaySize)" value="當前狀態">

其他格式及播放器

1.avi格式
代碼片斷如下：
<object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<param name="ShowDisplay" value="0">
<param name="ShowControls" value="1">
<param name="AutoStart" value="1">
<param name="AutoRewind" value="0">
<param name="PlayCount" value="0">
<param name="Appearance value="0 value=""">
<param name="BorderStyle value="0 value=""">
<param name="MovieWindowHeight" value="240">
<param name="MovieWindowWidth" value="320">
<param name="FileName" value="/Mbar.avi">
<embed width="400" height="200" border="0" showdisplay="0" showcontrols="1" playcount="0" moviewindowheight="240" moviewindowwidth="320" filename="/Mbar.avi" src="Mbar.avi">
</embed>
</object>

2.mpg格式
代碼片斷如下：
<object classid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A" id="ActiveMovie1" width="239" height="250">
<param name="Appearance" value="0">
<param name="AutoStart" value="-1">
<param name="AllowChangeDisplayMode" value="-1">
<param name="AllowHideDisplay" value="0">
<param name="AllowHideControls" value="-1">
<param name="AutoRewind" value="-1">
<param name="Balance" value="0">
<param name="CurrentPosition" value="0">
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableSelectionControls" value="0">
<param name="EnableTracker" value="-1">
<param name="Filename" value="/mpeg/halali.mpg" valuetype="ref">
<param name="FullScreenMode" value="0">
<param name="MovieWindowSize" value="0">
<param name="PlayCount" value="1">
<param name="Rate" value="1">
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="ShowControls" value="-1">
<param name="ShowDisplay" value="-1">
<param name="ShowPositionControls" value="0">
<param name="ShowTracker" value="-1">
<param name="Volume" value="-480">
</object>

4.rm格式
代碼片斷如下：
<OBJECT ID=video1 CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=288 WIDTH=352>
<param name="_ExtentX" value="9313">
<param name="_ExtentY" value="7620">
<param name="AUTOSTART" value="0">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="0">
<param name="SRC" value="rtsp://203.*.*.35/vod/dawan-a.rm">
<param name="CONTROLS" value="ImageWindow">
<param name="CONSOLE" value="Clip1">
<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"><embed SRC type="audio/x-pn-realaudio-plugin" CONSOLE="Clip1" CONTROLS="ImageWindow" HEIGHT="288" WIDTH="352" >
</OBJECT>

5.wmv格式
代碼片斷如下：
<object id="NSPlay" width=200 height=180 classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" align="right" hspace="5">
<param name="AutoRewind" value=1>
<param name="FileName" value="/blogflash/2/fff.swf">
<param name=InvokeURLs value=-1>
<param name=Language value=-1>
<param name=Mute value=0>
<param name=PlayCount value=1>
<param name=PreviewMode value=0>
<param name=Rate value=1>
<param name=SAMILang value="">
<param name=SAMIStyle value="">
<param name=SAMIFileName value="">
<param name=SelectionStart value=0>
<param name=SelectionEnd value=true>
<param name=SendOpenStateChangeEvents value=-1>
<param name=SendWarningEvents value=-1>
<param name=SendErrorEvents value=-1>
<param name=SendKeyboardEvents value=0>
<param name=SendMouseClickEvents value=0>
<param name=SendMouseMoveEvents value=0>
<param name=SendPlayStateChangeEvents value=-1>
<param name=ShowCaptioning value=0>
<param name=ShowControls value=1>
<param name=ShowAudioControls value=1>
<param name=ShowDisplay value=1>
<param name=ShowGotoBar value=1>
<param name=ShowPositionControls value=1>
<param name=ShowStatusBar value=1>
<param name=ShowTracker value=1>
<param name=TransparentAtStart value=0>
<param name=VideoBorderWidth value=0>
<param name=VideoBorderColor value=0>
<param name=VideoBorder3D value=0>
<param name=Volume value=-1070>
<param name=WindowlessVideo value=1>
</object>

網頁播放器的參數含義 Windows Media Player 網頁播放器參數含義

(默認0為否，-1或1為是)
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="286" height="225">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="-1">

<param name="AutoStart" value="-1">

<param name="AnimationAtStart" value="-1">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">

<param name="BaseURL" value>
<param name="BufferingTime" value="15">

<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="0">

<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="0">

<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<!-是否用右鍵彈出菜單控制-->
<param name="EnablePositionControls" value="-1">
<param name="EnableFullScreenControls" value="-1">
<param name="EnableTracker" value="-1">

<param name="Filename" value="/blog/01.wma" valuetype="ref">

<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">

<param name="PlayCount" value="10">

<param name="PreviewMode" value="-1">
<param name="Rate" value="1">

<param name="SAMIStyle" value>

<param name="SAMILang" value>

<param name="SAMIFilename" value>

<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">

<param name="ShowControls" value="-1">

<param name="ShowAudioControls" value="-1">

<param name="ShowDisplay" value="0">

<param name="ShowGotoBar" value="0">

<param name="ShowPositionControls" value="-1">

<param name="ShowStatusBar" value="-1">

<param name="ShowTracker" value="-1">

<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">

<param name="VideoBorderColor" value="0">

<param name="VideoBorder3D" value="0">
<param name="Volume" value="0">

<param name="WindowlessVideo" value="0">

</object>

上面的這個播放器是老式的那種，6.4版本！新式播放器是在MediaPlayer9.0以后出現的，也就是說只有裝了9.0或9.0以上的播放器才能正常使用的。

-------------------------------------------------------------------------------

下面是新式播放器代碼，相對以前的來說要簡單很多：
<object id="player" height="64" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param NAME="AutoStart" VALUE="-1">

<param NAME="Balance" VALUE="0">

<param name="enabled" value="-1">

<param NAME="EnableContextMenu" VALUE="-1">

<param NAME="url" value="/blog/1.wma">

<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="50">

<param name="mute" value="0">

<param name="uiMode" value="mini">

<param name="windowlessVideo" value="0">

<param name="fullScreen" value="0">

<param name="enableErrorDialogs" value="-1">

<param name="SAMIStyle" value>

<param name="SAMILang" value>

<param name="SAMIFilename" value>

</object>

html的Object標簽引入網頁，圖片，音頻，視頻實例集合

一、html的Object標簽顯示圖片:
[color=Red]<object height="100%" width="100%"
type="image/jpeg" data="audi.jpeg">
</object>[/color]
<html>
<body>
<h2>Picture As Object</h2>
<object height="100%" width="100%"
type="image/jpeg" data="/i/eg_audi.jpg">
</object>
</body>
</html>
<html>
<body>
<h2>Picture As Object</h2>
<object height="100%" width="100%"
type="image/jpeg" data="http://www.fuguojian.cn/blog2/attachments/month_0812/k2008122805216.jpg">
</object>
</body>
</html>

二、html的Object標簽顯示網頁：
[color=Red]<object type="text/html" height="100%" width="100%"
data="http://www.w3school.com.cn">
</object>[/color]
<html>
<body>
<h2>Web Page AS Object</h2>
<object type="text/html" height="100%" width="100%"
data="http://blog.fuguojian.cn">
</object>
</body>
</html>

三、html的Object標簽播放音頻：
[color=Red]<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="liar.wav" />
</object>[/color]
<html>
<body>
<h2>Playing The Object</h2>
<object
height="50%"
width="50%"
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="AutoStart" value="1" />
<param name="FileName" value="http://www.fuguojian.cn/music/Big%20Big%20World.mp3" />
</object>
</body>
</html>

四、html的Object標簽顯示日歷：
[color=Red]<object width="100%" height="80%"
classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02">
<param name="BackColor" value="14544622">
<param name="DayLength" value="1">
</object>[/color]
<html>
<body>
<h2>Calendar Object</h2>
<object width="100%" height="80%"
classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02">
<param name="BackColor" value="14544622">
<param name="DayLength" value="1">
</object>
</body>
</html>

五、html的Object標簽顯示圖形：
[color=Red]<object width="200" height="200"
classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
<param name="Line0001"
value="setFillColor(255, 0, 255)">
<param name="Line0002"
value="Oval(-100, -50, 200, 100, 30)">
</object>[/color]
<html>
<body>
<h2>Graphic Object</h2>
<object width="200" height="200"
classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
<param name="Line0001"
value="setFillColor(255, 0, 255)">
<param name="Line0002"
value="Oval(-100, -50, 200, 100, 30)">
</object>
</body>
</html>

六、html的Object標簽顯示Flash：
[color=Red]<object width="400" height="40"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="http://www.fuguojian.cn/blog2/123/time.swf" width="400" height="40"></embed>
</object>[/color]
<html>
<body>
<h2>Flash Animation As Object</h2>
<object width="400" height="40"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="http://www.fuguojian.cn/blog2/123/time.swf" width="400" height="40"></embed>
</object>
</body>
</html>

七、html的Object標簽播放視頻：
[color=Red]<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="3d.wmv" />
</object>[/color]
<html>
<body>
<h2>Playing The Object</h2>
<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param
name="FileName"
value="http://www.ananova.com/about/vap_windows_check.wmv" />
</object>
</body>
</html>

<object> 元素可播放 QuickTime 電影
通過 object 元素，可輕松將播放 QuickTime 影片的代碼添加到網頁中。如果用戶計算機中未安裝 QuickTime 播放器，則可將 object 設

置為自動安裝 QuickTime 播放器。

解決方案：
這些播放 QuickTime 影片的代碼：
[color=Red]<object width="160" height="144"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="sample.mov">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed src="sample.mov" width="160" height="144"
autoplay="true" controller="false"
pluginspage="http://fuguojian.cn/blog2/">
</embed>[/color]</object>
<object> 元素

object 元素的 width 和 height 屬性應當匹配影片的尺寸（以像素計）。
classid 可唯一地標識要使用的播放器軟件。它必須設置為 "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"。該唯一?嗦氡曄讀嗽詰纈安?/p>

放之前必須安裝在用戶 PC 上的 ActiveX 控件。如果用戶未安裝該 ActiveX 控件，則瀏覽器將自動下載並安裝它。

codebase 屬性規定了基准路徑，該路徑用於解析由 classid、data 和 archive 屬性規定的相對 URL。如果未規定，則其默認值是當前文檔的基

准 URL。注釋：Internet Explorer 使用該屬性來規定播放器的下載位置。該屬性必須被設置為 "http://www.apple.com/qtactivex/qtplugin.cab"

。此位置包含 QuickTime 播放器的最新版本。

src 參數指向電影文件。

如果希望電影自動播放的話，將 autoplay 參數設置為 "true"。

如果不希望顯示控制按鈕，將 controller 參數設置為 "false"。

media player控制

player.controls.play(); 播放
player.controls.stop(); 停止
player.controls.pause(); 暫停
player.controls.currentPosition 返回播放文件的當前時間位置（以秒為單位）
player.controls.currentPositionString 時間格式的字符串 “0:32″
player.currentMedia.duration 返回播放文件的總長度（以秒為單位）
player.currentMedia.durationString 時間格式的字符串 “4:34″
player.settings.volume 音量（0-100）
player.settings.balance 聲道，通過它應該可以進行立體聲、左聲道、右聲道的控制。但對應的取值尚不清楚。
player.settings.mute = s 靜音（s取值為true和false）
player.closedCaption.CaptioningID 網頁中出現字幕的容器的ID
player.closedCaption.SAMIFileName 字幕文件地址
player.playState 返回播放器狀態（ 3：正在播放，2：暫停1：已停止）

======================================================

REAL PLAYER控制

player.DoPlay() 播放
player.DoPause() 暫停
player.DoStop() 停止
player.GetLength() 返回播放文件的總長度（以毫秒為單位）
player.GetPosition() 返回播放文件的當前時間位置（以毫秒為單位）
player.GetPlayState() 返回播放器狀態（0:停止,1:連接,2:緩沖,3:播放,4:暫停,5:尋找）
player.SetPosition(n) 時間位置跳到n的地方（n取值以毫秒為單位）
player.SetVolume(n) 設置音量（n取值為0到100）
player.SetMute(s) 靜音（s取值為true和false）
player.SetFullScreen() 全屏
player.setSource() 設置文件來源

這個可以播放MP3
<HTML>
<HEAD>
  <TITLE>MP3播放器</TITLE>
  <SCRIPT language=javascript event=OpenComplete for=Player>
    Player_OpenComplete()
  </SCRIPT>

  <SCRIPT language=javascript event=PositionChange for=Player>
    Player_PositionChange()
  </SCRIPT>

  <SCRIPT language=javascript event=Timer for=Player>
    Player_Timer()
  </SCRIPT>

  <SCRIPT language=javascript event=StateChange for=Player>
    Player_StateChange()
  </SCRIPT>
</HEAD>

var OldPos, Length, Width

function PlayInit()
{
OldPos = 0
Width = Progress.style.posWidth
Progress.style.posWidth = 0
}

function Player_OpenComplete(){Length=Player.Duration;LengthLabel.innerText=FormatTime(Length);}
function Player_Timer()
{
var CurPos
CurPos=Math.floor(Player.CurrentPosition)
alert(CurPos)
if ( CurPos != OldPos )
{
  OldPos=CurPos
  TimeLabel.innerText=FormatTime(CurPos)
  Progress.style.posWidth=(Width * CurPos)/Length
}
}

function Player_PositionChange()
{
TimeLabel.innerText=FormatTime(Player.CurrentPosition)
Progress.style.posWidth=(Width * Player.CurrentPosition) / Length
}

function Player_StateChange()
{
if(Player.CurrentState==0){TimeLabel.innerText = FormatTime(0);Progress.style.posWidth=0}
}

function OpenBtn()
{
var fstr=”
FileBtn.click()
if (FileBtn.value==”) return
Player.FileName=FileBtn.value
fstr=FileBtn.value
var temparr=fstr.split(‘\\’)
FileNameLabel.innerText= ‘ ‘ + temparr[temparr.length-1]
Player.Run()
}

function PlayBtn(){Player.Run()}

function StopBtn(){Player.Stop()}

function PauseBtn(){Player.Pause()}

function RewBtn(){Player.CurrentPosition=Player.CurrentPosition-10}

function FFBtn(){Player.CurrentPosition=Player.CurrentPosition+10}

function FormatTime(value)
{
var min, sec, str
min=Math.floor(value / 60)
sec=Math.floor(value % 60)
if (isNaN(min)){return “00:00″}
if (min>9){str=min.toString() + “:”}else{str=”0″ + min.toString() + “:”}
if (sec>9){str=str + sec.toString()}else{str=str + “0″ + sec.toString()}
return str
}

</SCRIPT>

</BODY></HTML>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html5播放mp4視頻代碼 HTML標簽播放MP4視頻 ffmpeg mp4 to wmv and wmv to mp4 MP4和MP3的合成 HTML5中Video標簽無法播放mp4的解決辦法 node-webkit 不支持html5_video播放mp4的解決方法 python 播放MP3和MP4 你真的懂 MP4 格式嗎？ Mac ppt轉mp4 在線播放mp4

html object mp4

1. 播放器HTML靜態代碼

2. Javascript代碼實現（部分）

3. 相關資源

4. Quicktime插件函數列表

免責聲明！