HTML5知识学习之video元素作为DOM中的video对象的访问和创建形式介绍

HTML5中的video元素作为DOM中的video对象进行操作控制同样拥有方法、属性和事件，让我们在kphp框架网站中来讲解一下如何访问Video 对象和如何通过JavaScript代码来创建Video对象。

下面详细介绍一下访问 Video 对象的形式和如何创建 Video 对象：

1.访问 Video 对象的形式
先给video定义一个id，然后通过使用 getElementById() 来访问 video元素，
详细例子：
<video id="myvideo" controls poster="http://www.kphp.org/images/kphp.gif">
<source src="http://www.kphp.org/html5/kphp.ogv" type="video/ogg">
<source src="http://www.kphp.org/html5/kphp.mp4" type="video/mp4">
你的浏览器不支持video标签
</video>
<p>点击下面测试按钮讲会返回true或false，表示是否自动播放</p>
<button οnclick="myVideo()">测试</button>
<div id="message"></div>
JavaScript中代码：
function myVideo()
{
var Vobject = document.getElementById("myvideo");
document.getElementById("message").innerHTML =  Vobject.autoplay;
}
这种情况是存在video元素并在属性中定义了id，当我们没有video元素，可以通过JavaScript中的document.createElement() 方法来创建Video对象,
通过setAttribute方法给对象的属性进行赋值，下面就详细介绍一下如何创建Video 对象
2.创建 Video 对象
html的body中代码
<button οnclick="myVideo()">展示视频</button>
JavaScript中代码：
function myVideo()
{
//获得 Video 对象Vobject
var Vobject = document.createElement('VIDEO');
Vobject.setAttribute("width","300");
Vobject.setAttribute("height","300");
Vobject.setAttribute("controls", "controls");
Vobject.setAttribute("src", "kphp.ogg");
document.body.appendChild(Vobject);
}
//注意:IE和 Safari 浏览器不支持 .ogg 文件格式
通过以上讲解大家了解了如何访问video对象和如何创建Video对象，既然有video对象存在，根据对象的定义势必会有对象的属性和方法以及事件，在下一节课我们会讲解video对象的常用的一些属性和方法。

原文转自kphp框架，转载请注明出处： HTML5知识学习之video元素作为DOM中的video对象的访问和创建形式介绍