HTML5知识学习之video元素作为DOM中的video对象的访问和创建形式介绍
来源:互联网 发布:seo搜索引擎优化 遵义 编辑:程序博客网 时间:2024/06/11 06:34
HTML5中的video元素作为DOM中的video对象进行操作控制同样拥有方法、属性和事件,让我们在kphp框架网站中来讲解一下如何访问Video 对象和如何通过JavaScript代码来创建Video对象。
下面详细介绍一下访问 Video 对象的形式和如何创建 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 onclick="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 onclick="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对象的访问和创建形式介绍
0 0
- HTML5知识学习之video元素作为DOM中的video对象的访问和创建形式介绍
- HTML5中的video元素和audio元素
- html5知识学习之Video对象的属性autoplay,buffered,controls用法讲解
- HTML5 中的video标签介绍
- HTML5的video元素应用
- HTML5的学习之Video(五)
- html5中的video再学习
- HTML5的video元素和audio元素兼容性
- HTML5 Video元素
- HTML5 媒体元素--------video
- html5 video 元素
- 学习html5的video标签
- HTML5 Video标签的属性、方法和事件汇总介绍
- Html5的多媒体元素:audio video
- kphp框架分享之html5中Video对象的preload、src和played属性讲解
- HTML元素详细介绍之Audio&Video
- HTML元素详细介绍之Audio&Video
- HTML5 Video DOM 入门体验
- Git的深入理解与GitHub托管服务的使用
- 裁减jar包
- maven打包war应用时有两个web.xml
- ORACLE 创建自增序列生成流水号
- Genero DB Connect
- HTML5知识学习之video元素作为DOM中的video对象的访问和创建形式介绍
- Android工程项目解析
- Java WeakReference
- 关于Android程序入口的猜想
- Spring中JdbcTemplate使用RowMapper(简单明了的代码)
- map自定义比较函数
- 1008-Hive访问HBase表数据
- 优化Android Studio/Gradle构建
- git#install