跟KingDZ学HTML5之二 再见Audio和Video

呵呵，大家别见怪啊，这篇文章可不是和这两个标签 说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/>

·

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

posted @ 2011-08-22 18:25  KingDZ  阅读(1851)  评论(2)  编辑  收藏  举报