首页 > 代码库 > 跟KingDZ学HTML5之二 再见Audio和Video
跟KingDZ学HTML5之二 再见Audio和Video
呵呵,大家别见怪啊,这篇文章可不是和这两个标签 说BYE-BYE 而是,进一步的 运用这两个标签。
好了,我们这节课一开始,第一个例子,用JS控制 这两个标签,哦,对了,我之讲解一个了,这两个哥们的功能太像了,其他的大伙自己去理解吧。
<! DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function Show() {
var video = document.createElement(‘video‘);
video.src = http://www.mamicode.com/‘c:/text/1.mp4‘;"button" value="http://www.mamicode.com/显示视频" onclick="Show();"/>
<body>
</html>
这个就是我们用脚本去创建一个 video 对象了,呵呵。
好了,我们当然也可以这么着写的
<! doctype html> <html> <body> <video controls="true" width="320" height="240">不支持这个标签</video> <input type="button" value="http://www.mamicode.com/加载视频" onclick="document.getElementsByTagName(‘video‘)[0].src=http://www.mamicode.com/‘c:/text/1.mp4‘"/> <body> </html>
好了,呵呵,这个是不是可以写成,动态加载自己的视频文件呢?
HTML5开发的代码的 格式更加的 多样化,你可以
用下面的三种格式去 写HTML5的代码。
<video loop>
<video loop="">
<video loop="loop">
上面的三种代码都是正确的。
当然,你也可以自己给video 标签,写出来自己的 开始和结束
<! doctype html>
<html>
<head>
</head>
<body>
<video controls="true" width="320" height="240">不支持这个标签</video>
<input type="button" value="http://www.mamicode.com/加载视频" onclick="document.getElementsByTagName(‘video‘)[0].src=http://www.mamicode.com/‘c:/text/1.mp4‘"/>
<input type="button" value="http://www.mamicode.com/播放" onclick="document.getElementsByTagName(‘video‘)[0].play()" />
<input type="button" value="http://www.mamicode.com/暂停" onclick="document.getElementsByTagName(‘video‘)[0].pause()" />
<body>
</html>
当然你也可以做一个滚动条效果。【自己的滚动条哦】
<input type="range" step="any" id="seekbar"/>
在这里,我就不给大家实现了,就是 运用 JS 来控制的。
我们也可以实现 快放 和 慢放。
下面,我给大家慢慢的说一些 我在做 HTML5的实例时间的 觉得很好的东西
首先
<button class="play" title="play">►</button/>
大家看看是什么情况,哈哈
然后是
<button class="play" title="play">▐▐</button/>
哈哈。欢迎大家 和我交流 这两个标签的用法,再见啦。
跟KingDZ学HTML5之二 再见Audio和Video
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。