再见Audio和Video
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 330
呵呵,大家别见怪啊,这篇文章可不是和这两个标签说BYE-BYE而是,进一步的运用这两个标签。好了,我们这节课一开始,第一个例子,用JS控制这两个标签,哦,对了,我之讲解一个了,这两个哥们的功能太像了

呵呵,大家别见怪啊,这篇文章可不是和这两个标签 说BYE-BYE  而是,进一步的 运用这两个标签。

好了,我们这节课一开始,第一个例子,用JS控制  这两个标签,哦,对了,我之讲解一个了,这两个哥们的功能太像了,其他的大伙自己去理解吧。

  <! 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 对象了,呵呵。
  1

 

好了,我们当然也可以这么着写的

  <! 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>  

1

2

好了,呵呵,这个是不是可以写成,动态加载自己的视频文件呢?

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="加载视频" 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>  当然你也可以做一个滚动条效果。【自己的滚动条哦】  
    <input type="range" step="any" id="seekbar"/>  

在这里,我就不给大家实现了,就是 运用 JS 来控制的。

我们也可以实现 快放  和  慢放。

 

下面,我给大家慢慢的说一些  我在做 HTML5的实例时间的  觉得很好的东西

 

首先

  <button class="play" title="play">&#x25BA;</button/>  
大家看看是什么情况,哈哈

33
然后是

  <button class="play" title="play">&#x2590;&#x2590;</button/>  

·

哈哈。欢迎大家  和我交流   这两个标签的用法,再见啦。


作者:KingDZ
出处:http://www.cnblogs.com/hihell/
关于作者:作者喜欢编程,擅长ASP.NET网站开发,喜欢MVC,SilverLight开发,喜欢交流,喜欢创新
我的QQ:860866679 MSN:wangdezhen@live.com 期待有共同志向者交流进步。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题 可以通过KingDZ's Email  联系我,非常感谢。

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2