• h5-音视频标签


    ###1. <video>:Html5提供的播放视频的标签
                src:资源地址
                controls:该属性定义是显示还是隐藏用户控制界面

      调用默认控件   设置controls属性   =  “controls”;   

      注意: 在video元素中设置宽高指的是该元素的宽高,并非指视频内容的宽高

      1.1) 主流视频格式:                  音频文件格式:

        MPEG-4:  通常以.mp4为扩展名              .mp3

        Flashship:     以.flv为扩展名               .acc

        Ogg:             .ogg                    .ogg

        WebM:   .webm    

              音频视频交错:      .avi

      1.2.)  格式转化

        先将ffmpeg.exe文件下目录路径配置为环境变量(路径不能含中文),在执行以下命令
            用 FFmpeg 制作MP4 视频
                ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4
            
            用 FFmpeg 制作 WebM 视频
                ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm
            
            FFmpeg 制作 Ogg 视频
                ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv
            
            FFmpeg 制作Mp3音频
                ffmpeg -i test.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3
                
            FFmpeg 制作Ogg音频
                ffmpeg -i test.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg
            
            FFmpeg 制作ACC音频    
                ffmpeg -i test.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac
           

      1.3.) 兼容性  source元素

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

    ###2.<audio>:Html5提供的播放音频的标签
              src:资源地址
              controls:该属性定义是显示还是隐藏用户控制界面

    ###3.video标签的属性
        width  :视频显示区域的宽度,单位是CSS像素
        height :视频展示区域的高度,单位是CSS像素
        poster :一个海报帧的URL,用于在用户播放或者跳帧之前展示
        
        src          :       要嵌到页面的视频的URL
        controls  :  显示或隐藏用户控制界面
        autoplay  :  媒体是否自动播放
        loop        :  媒体是否循环播放
        muted        :  是否静音
        preload   :  该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
                        none: 提示作者认为用户不需要查看该视频,服务器也想要最小化访问流量;
                                  换句话说就是提示浏览器该视频不需要缓存。       //  不会预先加载,用户点击播放后才开始加载
                        metadata: 提示尽管作者认为用户不需要查看该视频,    //  同样不会预加载,但会提前获取视频长度,海报等信息
                                     不过抓取元数据(比如:长度)还是很合理的。
                        auto: 用户需要这个视频优先加载;换句话说就是提示:如果需要的话,
                                 可以下载整个视频,即使用户并不一定会用它。
                        空字符串:也就代指 auto 值。
                        
    ###4.audio标签的属性    
        src          
        controls  
        autoplay  
        loop        
        muted        
        preload   
        
        
    ###5.音视频js相关属性
        duration    :  媒体总时间(只读)    坑:有些浏览器在执行该属性方法时还没有加载完视频文件,也与网络有关,会返回NaN值  解决方案:搭配js相关事件使用。例如:suspend事件
        currentTime :  开始播放到现在所用的时间(可读写)
        muted       :  是否静音(可读写,相比于volume优先级要高)    坑: muted不会同步volume,要设置静音则需同时设置muted=true和volume=0;且muted优先级高
        volume      :  0.0-1.0的音量相对值(可读写)
        paused      :  媒体是否暂停(只读)
        ended       :  媒体是否播放完毕(只读)
        error       :  媒体发生错误的时候,返回错误代码 (只读)
        currentSrc  :  以字符串的形式返回媒体地址(只读)
        
        
        视频多的部分:
            poster  :   视频播放前的预览图片(读写)
            width、height  :   设置视频的尺寸(读写)
            videoWidth、 videoHeight  :   视频的实际尺寸(只读)


    ###6.音视频js相关函数
        play()  :  媒体播放
        pause()  :  媒体暂停
        load()  :  重新加载媒体


        
    ###7.js相关事件
        视频:
            abort     在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
            canplay    在媒体数据已经有足够的数据(至少播放数帧)可供播放时触发。这个事件对应CAN_PLAY的readyState。
            canplaythrough    在媒体的readyState变为CAN_PLAY_THROUGH时触发,表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。

      注意:手动设置currentTime会使得firefox触发一次canplaythrough事件,其他浏览器或许不会如此。
            durationchange    元信息已载入或已改变,表明媒体的长度发生了改变。例如,在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
            emptied    媒体被清空(初始化)时触发。
            ended    播放结束时触发。
            error    在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
            loadeddata    媒体的第一帧已经加载完毕。
            loadedmetadata    媒体的元数据已经加载完毕,现在所有的属性包含了它们应有的有效信息。
            loadstart    在媒体开始加载时触发。
            mozaudioavailable    当音频数据缓存并交给音频层处理时
            pause    播放暂停时触发。
            play    在媒体回放被暂停后再次开始时触发。即,在一次暂停事件后恢复媒体回放。
            playing    在媒体开始播放时触发(不论是初次播放、在暂停后恢复、或是在结束后重新开始)。
            progress    告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
            ratechange    在回放速率变化时触发。
            seeked    在跳跃操作完成时触发。
            seeking    在跳跃操作开始时触发。
            stalled    在尝试获取媒体数据,但数据不可用时触发。
            suspend    在媒体资源加载终止时触发,这可能是因为下载已完成或因为其他原因暂停。
            timeupdate    元素的currentTime属性表示的时间已经改变。
            volumechange    在音频音量改变时触发(既可以是volume属性改变,也可以是muted属性改变).。
            waiting    在一个待执行的操作(如回放)因等待另一个操作(如跳跃或下载)被延迟时触发

        音频:
            abort     在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
            canplay    在媒体数据已经有足够的数据(至少播放数帧)可供播放时触发。这个事件对应CAN_PLAY的readyState。
            canplaythrough    在媒体的readyState变为CAN_PLAY_THROUGH时触发,表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。

      注意:手动设置currentTime会使得firefox触发一次  canplaythrough事件,其他浏览器或许不会如此。
            durationchange    元信息已载入或已改变,表明媒体的长度发生了改变。例如,在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
            emptied    媒体被清空(初始化)时触发。
            ended    播放结束时触发。
            error    在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
            loadeddata    媒体的第一帧已经加载完毕。
            loadedmetadata    媒体的元数据已经加载完毕,现在所有的属性包含了它们应有的有效信息。
            loadstart    在媒体开始加载时触发。
            mozaudioavailable    当音频数据缓存并交给音频层处理时
            pause    播放暂停时触发。
            play    在媒体回放被暂停后再次开始时触发。即,在一次暂停事件后恢复媒体回放。
            playing    在媒体开始播放时触发(不论是初次播放、在暂停后恢复、或是在结束后重新开始)。
            progress    告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
            ratechange    在回放速率变化时触发。
            seeked    在跳跃操作完成时触发。
            seeking    在跳跃操作开始时触发。
            stalled    在尝试获取媒体数据,但数据不可用时触发。
            suspend    在媒体资源加载终止时触发,这可能是因为下载已完成或因为其他原因暂停。
            timeupdate    元素的currentTime属性表示的时间已经改变。
            volumechange    在音频音量改变时触发(既可以是volume属性改变,也可以是muted属性改变).。
            waiting    在一个待执行的操作(如回放)因等待另一个操作(如跳跃或下载)被延迟时触发

  • 相关阅读:
    20160729noip模拟赛zld
    20160728noip模拟赛zld
    20160727noip模拟赛zld
    20160725noip模拟赛“Paodekuai” alexandrali
    20160723数据结构节alexandrali
    20160722noip模拟赛alexandrali
    洛谷 [P2594] 染色游戏
    洛谷 [P3480] KAM-Pebbles
    UVA 1378 A Funny Stone Game
    SPOJ 4060 A game with probability
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10573033.html
Copyright © 2020-2023  润新知