• HTML5音/视频标签详解


    一、发展历:
    早期:<embed>+<object>+文件
       问题:不是所有浏览器都支持,而且embed不是标准。
     
    现状:Realplaywindow mediaQuick Time Flash
      问题:每个厂商每个标准,网站编码和格式也都不相同,flash的出现解决了面的问题,但是apple在07年决定任何设备将不再支持flash。
     
    HTML5认为浏览器应该原生支持音视频,因为他们现在也是web中的一等公民了!
     
     
    二、视频格式的简单介绍
     
    1、常见的视频格式
     
    视频的组成部分:画面、音频、编码格式
    视频编码:H.264、Theora、VP8(google开源)
     
    常见的音频格式
    音频编码:ACC、MP3、Vorbis
     
    2、HTML5支持的格式
    HTML5能在完全脱离插件的情况下播放音视频但是不是所有格式都支持。HTML5支持的视频格式:
      Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件      支持的浏览器:F、C、O   
     
      MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件    支持的浏览器: S、C    
     
      WebM=带有VP8视频编码+Vorbis音频编码的WebM格式      支持的浏览器: I、F、C、O
     
     
     
    三、<Video>
    1.标签的使用:
    <video src="文件地址" controls="controls"></video>

    IE9以上才支持HTML5,对于不支持的浏览器应该有友好的提示:

    <video src="文件地址" controls="controls">
            您的浏览器暂不支持video标签。播放视频
    </ video >

    再优化:让video标签载入多种不同的音频格式,让浏览器选择他支持的格式,第一个找到了播放第一条,没找到找第二天,以此类推,最后还没找到给出提示不支持

        <video  controls="controls"  width="600">
            <source src="movie.ogg" type="video/ogg" >
            <source src="move.mp4" type="video/mp4" >
            您的浏览器暂不支持video标签。播放视频
        </ video >
     
    2.Video标签的常见属性
    <video src="movie.ogg" controls="controls" Loop="Loop" poster="PLMM.jpg" id="video">
                您的破浏览器都是古董早该换了,不然休想看我们的激情小电影。
    </video>

    3.Video的API方法

     
     
    4.Video的API属性
    <body>
        
        <video src="movie.webm" controls="controls" id="video">
                您的破浏览器都是古董早该换了,不然休想看我们的激情小电影。
        </video>
        <br />
        <button onClick="bofang()">播放</button>
        <button onClick="zanting()">暂停</button>
         <button onClick="kuaijin()">快进</button>
         <button onClick="kuaitui()">快退</button>
         <button onClick="jingyin(this)">静音</button>
         <button onClick="jiansu()">减速</button>
         <button onClick="jiasu()">加速</button>
         <button onClick="normal()">正常播放</button>
          <button onClick="up()">增大音量</button>
           <button onClick="down()">减小音量</button>
        <script>
            //获取对应的video标签
            var video = document.getElementById('video');
            
            //播放方法
            function bofang(){
                video.play();
            }
            
            //暂停方法
            function zanting(){
                video.pause();
            }
            
            //快进按钮
            function kuaijin(){
                video.currentTime+=10;//currentTime该属性是获取当前播放的时间,加加上10就快进10秒
            }
            //快退
            function kuaitui(){
                video.currentTime-=10;
            }
            
            //静音
            function jingyin(obj){
                if(video.muted){
                    obj.innerHTML='静音';
                    video.muted=false;
                }else{
                    obj.innerHTML='关闭静音';
                    video.muted=true;
                }
            }
            
            //加速播放(快3倍) //要想慢3倍,应该是3分之1,因为当前是1
            function jiansu(){
                video.playbackRate = 1/3; 
            }
            //减速播放(慢3倍)
            function jiasu(){
                video.playbackRate=3;
            }
            //正常播放
            function normal(){
                video.playbackRate=1;
            }
            
            //调大音量,音量值的范围是0到1
            function up(){
                video.volume+=0.2;
            }
            //调小声音
            function down(){
                video.volume-=0.2;
            }
        </script>
    
    </body>
    </html>
    5.Video的常用事件
     
     
     
     
     
    四、HTML5支持的音频格式
    HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,当然支持格式是有限的
     
    HTML5支持的音频格式:
      Ogg    免费 支持的浏览器:C、F、O
      MP3    收费 支持的浏览器: I、C、S
      Wav    收费 支持的浏览器: F、O、S
     
     
     
    五、<audio>
    1.标签的使用
    <audio  src="文件地址" controls="controls"></audio>
    IE9以上才支持HTML5,对于不支持的浏览器应该有友好的提示:
    <audio src="文件地址" controls="controls">
        您的浏览器暂不支持audio标签。播放视频
    </ audio >

    再优化:让video标签载入多种不同的音频格式,让浏览器选择他支持的格式,第一个找到了播放第一条,没找到找第二天,以此类推,最后还没找到给出提示不支持

    < audio controls="controls"  >
        <source src="happy.MP3" type="video/mp3" >
        <source src="happy.ogg" type="video/ogg" >
        您的浏览器暂不支持audio标签。播放视频
    </ audio>
     
    audio的常见属性
    该标签除了一些属性不同外,其他API方法都是一样
  • 相关阅读:
    jchdl
    jchdl
    UVa 10256 (判断两个凸包相离) The Great Divide
    UVa 11168 (凸包+点到直线距离) Airport
    LA 2572 (求可见圆盘的数量) Kanazawa
    UVa 10652 (简单凸包) Board Wrapping
    UVa 12304 (6个二维几何问题合集) 2D Geometry 110 in 1!
    UVa 10674 (求两圆公切线) Tangents
    UVa 11796 Dog Distance
    LA 3263 (平面图的欧拉定理) That Nice Euler Circuit
  • 原文地址:https://www.cnblogs.com/LO-ME/p/3632002.html
Copyright © 2020-2023  润新知