HTML DOM video 视频对象

htmlweb developmentfront end technology更新于 2024/1/30 17:48:17

HTML 中的 HTML DOM 视频对象代表 <video>元素。

创建 <video> 元素

var videoObject = document.createElement(“VIDEO”)

此处，“videoObject” 可以具有以下属性 −

属性	描述
audioTracks	返回一个代表可用音轨的 AudioTrackList 对象
autoplay	设置/返回视频是否应在准备就绪后立即开始播放
buffered	返回一个 TimeRanges 对象，该对象表示视频的缓冲部分
controller	返回一个 MediaController 对象，该对象表示视频的当前媒体控制器
controls	设置/返回视频是否应包含控件显示(播放/暂停等)
crossOrigin	设置/返回视频的 CORS 设置
currentSrc	返回当前视频的 URL
currentTime	设置/返回视频的当前播放位置(以秒为单位)
defaultMuted	设置/返回视频是否默认静音
defaultPlaybackRate	设置/返回视频的默认播放速度
duration	返回视频时长(以秒为单位)
ended	返回视频播放是否结束
error	返回一个 MediaError 对象，表示视频的错误状态
height	设置/返回视频高度属性的值
loop	设置/返回视频每次播放结束后是否重新开始播放
mediaGroup	设置/返回视频所属媒体组的名称
muted	设置/返回视频声音是否关闭
networkState	返回视频当前网络状态
paused	返回视频是否暂停
playbackRate	设置/返回视频播放速度
played	返回一个 TimeRanges 对象，表示视频已播放的部分
poster	设置/返回视频 poster 属性的值
preload	设置/返回视频 preload 属性的值
readyState	返回视频的当前就绪状态
seekable	返回一个 TimeRanges 对象，该对象表示视频的可定位部分
seeking	返回用户当前是否正在视频中定位
src	设置/返回视频的 src 属性值视频
startDate	返回一个表示当前时间偏移的 Date 对象
textTracks	返回一个表示可用文本轨道的 TextTrackList 对象
videoTracks	返回一个表示可用视频轨道的 VideoTrackList 对象
volume	设置/返回视频的音量
width	设置/返回视频宽度属性的值

让我们看一个属性的示例，即 HTML DOM 视频 networkState 属性 −

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video networkState</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-Video-networkState</legend>
         <video id="demo" width="320" controls><source    src="http://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
         <input type="button" onclick="setTrackDetails()" value="Set Source">
         <input type="button" onclick="getTrackDetails()" value="Get Network State">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var demo = document.getElementById("demo");
   var srcOfMedia = 'http://www.tutorialspoint.com/html5/foo.mp4';
   function getTrackDetails() {
      divDisplay.textContent = 'Network State: '+demo.networkState;
   }
   function setTrackDetails() {
      demo.src = srcOfMedia;
      demo.load();
   }
</script>
</body>
</html>

输出

点击‘获取网络状态’按钮，但未定义来源 &inus;

点击‘获取网络状态’按钮，但定义了来源，但浏览器正在下载数据 −

此外，“videoObject”可以具有以下方法−

方法	描述
addTextTrack()	向视频添加新的文本轨道
canPlayType()	检查浏览器是否可以播放指定的视频类型
load()	重新渲染视频元素
play()	用于开始播放视频
pause()	用于暂停正在播放的视频

让我们看一个 Video canPlayType() 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video canPlayType()</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-Video-canPlayType( )</legend>
         <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
         <input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var demo = document.getElementById("demo");
   var srcOfMedia = 'http://www.tutorialspoint.com/html5/foo.mp4';
   function getTrackDetails() {
      var ans = demo.canPlayType('video/mp4');
      if(ans !== ''){
         divDisplay.textContent = 'Browser supports mp4';
         demo.src = srcOfMedia;
         demo.load();
      }
      else
         divDisplay.textContent = 'Browser does not supports mp4';
   }
</script>
</body>
</html>