• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5使用DOM进行自定义控制示例代码
    HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。
    当然效果不是很美观,若想好看的可以自己设置css样式等。

    复制代码
    代码如下:

    <div id="video_div" style="text-align:center;">
    <button onclick="playPause()">播放/暂停</button>
    <button onclick="toBig()">大</button>
    <button onclick="toNormal()">中</button>
    <button onclick="toSmall()">小</button>

    <video id="myVideo" width="500" height="250" style="margin-top:15px;">
    <source src="demo.mp4" type="video/mp4" />
    <source src="demo.ogg" type="video/ogg" />
    您的浏览器不支持此HTML5 视频标签。
    </video>
    </div>


    复制代码
    代码如下:

    <script type="text/javascript">
    var myVideo=document.getElementById("myVideo");
    function playPause()
    {
    if (myVideo.paused)
    myVideo.play();
    else
    myVideo.pause();
    }
    function toBig()
    {
    myVideo.width=560;
    }
    function toNormal()
    {
    myVideo.width=420;
    }
    function toSmall()
    {
    myVideo.width=320;
    }
    </script>

    需要注意的是在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。
    在视频的元数据已加载后,其他属性才可用。
    上一篇:HTML5拖拽文件到浏览器并实现文件上传下载功能代码
    下一篇:HTML5中如何显示视频呢 HTML5视频播放demo
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5使用DOM进行自定义控制示例代码 HTML5,使用,DOM,进行,自定义,