zoukankan      html  css  js  c++  java
  • 跟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/>
    

    ·

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

  • 相关阅读:
    tar
    网站后台管理页面
    [转译][马基 杰斯特(MarkeyJester) 摩托罗拉68000 入门教程] 肆
    [转译][马基 杰斯特(MarkeyJester) 摩托罗拉68000 入门教程] 肆
    [转译][马基 杰斯特(MarkeyJester) 摩托罗拉68000 入门教程] 肆
    [转译][马基 杰斯特(MarkeyJester) 摩托罗拉68000 入门教程] 肆
    [转译][马基 杰斯特(MarkeyJester) 摩托罗拉68000 入门教程] 肆
    [转译][马基 杰斯特(MarkeyJester) 摩托罗拉68000 入门教程] 肆
    [转译][马基 杰斯特(MarkeyJester) 摩托罗拉68000 入门教程] 肆
    [转译][马基 杰斯特(MarkeyJester) 摩托罗拉68000 入门教程] 肆
  • 原文地址:https://www.cnblogs.com/zhaolizhe/p/6923556.html
Copyright © 2011-2022 走看看