zoukankan      html  css  js  c++  java
  • HTML5学习(一)视频

    我使用的是JetBrains WebStorm 2.0.1 这个开发工具.   下载地址:http://urlxf.qq.com/?nmiURzu
     
    播放视频:
     

    <video> 标签的属性

    属性描述
    autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
    controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
    height pixels 设置视频播放器的高度。
    loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
    preload preload

    如果出现该属性,则视频在页面加载时进行加载,并预备播放。

    如果使用 "autoplay",则忽略该属性。

    src url 要播放的视频的 URL。
    width pixels 设置视频播放器的宽度。

    HTML5 <video> - 方法、属性以及事件

    下面列出了大多数浏览器支持的视频方法、属性和事件:

    方法属性事件
    play() currentSrc play
    pause() currentTime pause
    load() videoWidth progress
    canPlayType videoHeight error
      duration timeupdate
      ended ended
      error abort
      paused empty
      muted emptied
      seeking waiting
      volume loadedmetadata
      height  
      width  

     
    <!DOCTYPE html >
    <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     </head>
    
    <body> 
    
    <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="E:/QQ download/wxhl.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()
    {
        for( i=0; i < 5 ; i++){
        myVideo.width+=100;
        }
        if(myVideo.width > 1600)
            myVideo.width = 1600;
    } 
    
    function makeSmall()
    { 
     for( i=0; i < 5 ; i++){
        myVideo.width-=100;
        }
        if(myVideo.width < 240)
            myVideo.width = 240;
    } 
    
    function makeNormal()
    { 
    myVideo.width=420; 
    } 
    </script> 
    
    </body> 
    </html>
    

      

  • 相关阅读:
    vim配置----YouCompleteMe配置
    Linux之configure make make install
    zookeeper原理与实践(一)----zookeeper的基本功能
    RPC原理与实践(二)----Thrift分层模型
    RPC原理与实践(一)----RPC原理与实现(Thrift版)
    mysql由浅入深探究(四)----mysql事务详解
    mysql由浅入深探究(三)----mysql增删改查
    mysql由浅入深探究(二)----mysql用户操作
    Django
    7.1
  • 原文地址:https://www.cnblogs.com/liuzenglong/p/3129658.html
Copyright © 2011-2022 走看看