返回上一页
客服QQ
客服QQ
一切从沟通开始……
跟KingDZ学HTML5之二：再见Audio和Video
作者：睿美印象网站建设工作室 发布日期：2012-11-23
呵呵，大家别见怪啊，这篇文章可不是和这两个标签 说BYE-BYE 而是，进一步的 运用这两个标签。
好了，我们这节课一开始，第一个例子，用JS控制 这两个标签，哦，对了，我之讲解一个了，这两个哥们的功能太像了，其他的大伙自己去理解吧。
XML/HTML Code复制内容到剪贴板
<! DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function Show() {
var video = document.createElement(video);
video.src = c:/text/1.mp4;
video.controls = true;
document.body.appendChild(video);
}
</script>
</head>
<body>
<input type="button" value="显示视频" onclick="Show();"/>
<body>
</html>
这个就是我们用脚本去创建一个 video 对象了，呵呵。
好了，我们当然也可以这么着写的
XML/HTML Code复制内容到剪贴板
<! doctype html>
<html>
<body>
<video controls="true" width="320" height="240">不支持这个标签</video>
<input type="button" value="加载视频" onclick="document.getElementsByTagName(video)[0].src=c:/text/1.mp4"/>
<body>
</html>
好了，呵呵，这个是不是可以写成，动态加载自己的视频文件呢？
HTML5开发的代码的 格式更加的 多样化，你可以
用下面的三种格式去 写HTML5的代码。
XML/HTML Code复制内容到剪贴板
<video loop>
<video loop="">
<video loop="loop">
上面的三种代码都是正确的。
当然，你也可以自己给video 标签，写出来自己的 开始和结束
XML/HTML Code复制内容到剪贴板
<! doctype html>
<html>
<head>
</head>
<body>
<video controls="true" width="320" height="240">不支持这个标签</video>
<input type="button" value="加载视频" onclick="document.getElementsByTagName(video)[0].src=c:/text/1.mp4"/>
<input type="button" value="播放" onclick="document.getElementsByTagName(video)[0].play()" />
<input type="button" value="暂停" onclick="document.getElementsByTagName(video)[0].pause()" />
<body>
</html>
当然你也可以做一个滚动条效果。【自己的滚动条哦】
XML/HTML Code复制内容到剪贴板
<input type="range" step="any" id="seekbar"/>
在这里，我就不给大家实现了，就是 运用 JS 来控制的。
我们也可以实现 快放 和 慢放。
下面，我给大家慢慢的说一些 我在做 HTML5的实例时间的 觉得很好的东西
首先
XML/HTML Code复制内容到剪贴板
<button class="play" title="play">►</button/>
大家看看是什么情况，哈哈
然后是
XML/HTML Code复制内容到剪贴板
<button class="play" title="play">▐▐</button/>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
好了，我们这节课一开始，第一个例子，用JS控制 这两个标签，哦，对了，我之讲解一个了，这两个哥们的功能太像了，其他的大伙自己去理解吧。
XML/HTML Code复制内容到剪贴板
<! DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function Show() {
var video = document.createElement(video);
video.src = c:/text/1.mp4;
video.controls = true;
document.body.appendChild(video);
}
</script>
</head>
<body>
<input type="button" value="显示视频" onclick="Show();"/>
<body>
</html>
这个就是我们用脚本去创建一个 video 对象了，呵呵。
好了，我们当然也可以这么着写的
XML/HTML Code复制内容到剪贴板
<! doctype html>
<html>
<body>
<video controls="true" width="320" height="240">不支持这个标签</video>
<input type="button" value="加载视频" onclick="document.getElementsByTagName(video)[0].src=c:/text/1.mp4"/>
<body>
</html>
好了，呵呵，这个是不是可以写成，动态加载自己的视频文件呢？
HTML5开发的代码的 格式更加的 多样化，你可以
用下面的三种格式去 写HTML5的代码。
XML/HTML Code复制内容到剪贴板
<video loop>
<video loop="">
<video loop="loop">
上面的三种代码都是正确的。
当然，你也可以自己给video 标签，写出来自己的 开始和结束
XML/HTML Code复制内容到剪贴板
<! doctype html>
<html>
<head>
</head>
<body>
<video controls="true" width="320" height="240">不支持这个标签</video>
<input type="button" value="加载视频" onclick="document.getElementsByTagName(video)[0].src=c:/text/1.mp4"/>
<input type="button" value="播放" onclick="document.getElementsByTagName(video)[0].play()" />
<input type="button" value="暂停" onclick="document.getElementsByTagName(video)[0].pause()" />
<body>
</html>
当然你也可以做一个滚动条效果。【自己的滚动条哦】
XML/HTML Code复制内容到剪贴板
<input type="range" step="any" id="seekbar"/>
在这里，我就不给大家实现了，就是 运用 JS 来控制的。
我们也可以实现 快放 和 慢放。
下面，我给大家慢慢的说一些 我在做 HTML5的实例时间的 觉得很好的东西
首先
XML/HTML Code复制内容到剪贴板
<button class="play" title="play">►</button/>
大家看看是什么情况，哈哈
然后是
XML/HTML Code复制内容到剪贴板
<button class="play" title="play">▐▐</button/>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
已有 0 条评论
暂无评论
- 实现大DIV套小DIV，小DIV随意调整大小，永远居中在大DIV内
- HTML元素的ID和Name属性的区别
- 基于 HTML5 的人脸识别技术
- CSS Sprites如何使用重复背景
- 《精通HTML5编程》第二：Canvas画布
- 15、【视频】CSS的行高Line Height属性
- 跟KingDZ学HTML5之九：新的input类型1
- 第十天 div+css网页标准布局实例教程（三）
- HTML5视觉手册
- 第五天 超链接伪类
- 再谈IE6下png不透明问题
- 哪些情况下需要CSS隐藏文字？
- img图片元素下多余空白解决方案
- HTML5特性检测四：本地存储（Local Storage）
- 火狐浏览器下文本自适应高度问题
- 去掉焦点虚线
版权所有：睿美印象网络网站建设工作室 2010-2012 服务热线：15636322282（网站建设工作室）
