zoukankan      html  css  js  c++  java
  • html5学习1

    1.放上一个视频

    <video width="320" height="240" controls="controls">
    <source src="/i/movie.ogg" type="video/ogg">
    <source src="/i/movie1.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>

    使用video标签,width和height属性是视频占的空间大小,controls属性是浏览器提供的控件。

    两个source应该是有个兼容的效果在里面。浏览器会选择第一个支持的播放。

    loop=loop是循环播放,autoplay是自动播放。

    2.使用javascript来控制视频的播放和变化

    按钮代码,div表示一个区域

    <div style="text-align:center;">
    <button onclick="playPause()">播放/暂停</button> 
    <button onclick="makeBig()">大</button>
    <button onclick="makeNormal()">中</button>
    <button onclick="makeSmall()">小</button>
    <br /> 
    <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
    </video>
    </div>

    脚本代码

    <script type="text/javascript">
    var myVideo=document.getElementById("video1");

    function playPause()
    {
    if (myVideo.paused)
    myVideo.play();
    else
    myVideo.pause();
    }

    function makeBig()
    {
    myVideo.width=560;
    }

    function makeSmall()
    {
    myVideo.width=320;
    }

    function makeNormal()
    {
    myVideo.width=420;
    }
    </script>

    使用document.getElementById来获取video的各项属性。

    通过video的各个默认函数来达到效果。

  • 相关阅读:
    oracle闪回查询
    带搜索框的jQuery下拉框插件
    Eclipse、Tomcat、Spring3等使用过程的一些配置、错误等的总结记录
    局域网不能访问本机IIS网站的解决方法
    在同一台电脑部署多个Tomcat服务
    Tomcat重启脚本
    IE8下面parseInt('08')、parseInt('09')会转成0
    [转]Examining Open vSwitch Traffic Patterns
    [转]Ubuntu Precise
    [转] iptables
  • 原文地址:https://www.cnblogs.com/FortHorde/p/4624477.html
Copyright © 2011-2022 走看看