h5-音视频标签

最新推荐文章于 2024-05-31 22:20:16 发布

weixin_30270889

最新推荐文章于 2024-05-31 22:20:16 发布

阅读量298

点赞数

文章标签： ffmpeg

原文链接：http://www.cnblogs.com/john-hwd/p/10573033.html

版权

###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>
　　　　
　　　　当前浏览器不支持 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    在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发