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

本文探讨了HTML5中video元素作为DOM对象的使用,包括如何访问Video对象及其方法、属性和事件。在kphp框架网站中,我们将阐述通过JavaScript创建和控制Video对象的详细过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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对象的访问和创建形式介绍
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值