zoukankan      html  css  js  c++  java
  • HTML5-Video视频-基础篇

    展示视频

    视频

    <video width="320" height="240" controls="controls">
                <source src="movie.mp4" type="video/mp4"></source>
                <source src="movie.ogv" type="video/ogg"></source>
                <source src="movie.webm" type="video/webm"></source>
                <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                    <param name="movie" value="myvideo.swf" />
                    <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
                </object>
                当前浏览器不支持 video直接播放,点击这里下载视频: <a href="movie.webm">下载视频</a>
    </video>

    运行结果:

    <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

     

    使用DOM进行控制

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head>
    <body> 
    
    <div style="text-align:center"> 
      <button onclick="playPause()">播放/暂停</button> 
      <button onclick="makeBig()">放大</button>
      <button onclick="makeSmall()">缩小</button>
      <button onclick="makeNormal()">普通</button>
      <br> 
      <video id="video1" width="420">
        <source src="mov_bbb.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        您的浏览器不支持 HTML5 video 标签。
      </video>
    </div> 
    
    <script> 
    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> 
    
    </body> 
    </html>

    运行结果:

  • 相关阅读:
    让我用69406条评论告诉你“反贪风暴”好不好看!!!
    【大数据】爬取全部的校园新闻
    【大数据】获取一篇新闻的全部信息
    【大数据】理解爬虫原理
    中文统计
    [大数据]统计词频
    数据库表设计以及表字段命名
    设计模式的理论理解
    文件上传之oss服务器上传文件简笔
    QueryWrapper/UpdateWrapper认识
  • 原文地址:https://www.cnblogs.com/xiaonangua/p/video.html
Copyright © 2011-2022 走看看