H5 Video + DOM

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5 Video + DOM相关的知识,希望对你有一定的参考价值。

html 5 Video + DOM

HTML5 <video> - 使用 DOM 进行控制

HTML5 <video> 元素同样拥有方法、属性和事件。

其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。

下例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。

实例

为视频创建简单的播放/暂停以及调整尺寸控件:

 

播放/暂停 大 中 小

 

上面的例子调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。

亲自试一试

HTML5 <video> - 方法、属性以及事件

下面列出了大多数浏览器支持的视频方法、属性和事件:

方法

属性

事件

play()

currentSrc

play

pause()

currentTime

pause

load()

videoWidth

progress

canPlayType

videoHeight

error

 

duration

timeupdate

 

ended

ended

 

error

abort

 

paused

empty

 

muted

emptied

 

seeking

waiting

 

volume

loadedmetadata

 

height

 

 

width

 

注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。

 

 

 

 

 

 

 

 

<!DOCTYPE html>

<html>

<body>

 

<div style="text-align:center;">

  <button onclick="playPause()">播放/暂停</button>

  <button onclick="makeBig()">大</button>

  <button onclick="makeNormal()">中</button>

  <button onclick="makeSmall()">小</button>

  <br />

  <video id="video1" width="420" style="margin-top:15px;">

    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />

    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />

    Your browser does not support HTML5 video.

  </video>

</div>

 

<script type="text/javascript">

var myVideo=document.getElementById("video1");

 

function playPause()

{

if (myVideo.paused)

  myVideo.play();

else

  myVideo.pause();

}

 

function makeBig()

{

myVideo.width=560;

}

 

function makeSmall()

{

myVideo.width=320;

}

 

function makeNormal()

{

myVideo.width=420;

}

</script>

 

</body>

</html>

以上是关于H5 Video + DOM的主要内容,如果未能解决你的问题,请参考以下文章

h5之video

h5 的video视频控件

H5:设置video自动播放

H5:设置video自动播放

H5 的 video

h5 video自动播放