###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    在一个待执行的操作(如回放)因等待另一个操作(如跳跃或下载)被延迟时触发

h5-音视频标签的更多相关文章

  1. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

  2. html音视频标签

    音视频标签是html5标签,分别为<audio></audio>和<video></video>,这两个标签用法大致相同,且都仅在IE9及以上版本和其他 ...

  3. HTML5_音视频标签 &lt;audio&gt; 和 &lt;video&gt;

    HTML5_音视频标签 <audio> 和 <video> audio 和 video 都是 inline行内元素 如果浏览器支持,则不显示标签文本 IE8 不支持 audio ...

  4. HTML5音/视频标签详解

    一.发展历: 早期:<embed>+<object>+文件   问题:不是所有浏览器都支持,而且embed不是标准.   现状:Realplay.window media.Qu ...

  5. IPhone微信H5用Video标签播放不了视频

    H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)

  6. Android Webview中解决H5的音视频不能自动播放的问题

    在开发webview的时候,当加载有声音的网页的时候,声音不会自动播放, 解决方法:在webview中调用js方法.这个方法需要在webview的setWebViewClient方法之后在onPage ...

  7. HTML5对音视频的处理

      前  言 现在网上有许多的框架和插件,能够满足程序猿的各种需求,慢慢的,就有些忽视最基础的东西. 比如,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. H ...

  8. Android IOS WebRTC 音视频开发总结(八十一)-- WebRTC靠谱吗?有没有适合的SDK推荐?

    作者:blaker,最早发表在我们的微信公众和[编风网],详见[这里] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:blackerteam 或 webrtcorgcn) ...

  9. HTML5_布局and音视频

    HTML5_布局and音视频 I.HTML5标签的改变1.文档声明HTML语法是不区分大小写的HTML5的DTD声明为:<!doctype html>确保浏览器能在HTML5的标准模式下进 ...

  10. h5的video标签

    在video标签中,我们可以使用属性:videoWidth & videoHeight,它获取的是video的宽度和高度(媒体本身). 虽然不能直接使用,但是可以通过计算宽高比得到 video ...

随机推荐

  1. CSS3中:nth-child和:nth-of-type的区别深入理解。 关于:nth-child和:nth-of-type的区别之前一直没太注意,经深入理解才发现里面其实暗藏玄机

    关于:nth-child和:nth-of-type的区别之前一直没太注意.最近打算深入了解一些CSS3,才发现里面其实暗藏玄机. :nth-child可以选择父元素下的字元素,:nth-of-type ...

  2. MyBatis XML 映射配置文件

    配置文件的基本结构 configuration —— 根元素 properties —— 定义配置外在化 settings —— 一些全局性的配置 typeAliases —— 为一些类定义别名 ty ...

  3. [开发笔记]-VS2012打开解决方案崩溃或点击项目崩溃

    下午在使用VS2012建立Service服务项目时,只要一切换到设计视图页面中,VS就崩溃重启,从网上找了一种方法来解决,测试可行.但导致该问题的原因未知. 解决方案: 步骤1:开始-->所有程 ...

  4. POJ 1185 炮兵阵地(状态压缩DP)

    题解:nState为状态数,state数组为可能的状态 代码: #include <map> #include <set> #include <list> #inc ...

  5. crm操作权限

    using System;     using Microsoft.Xrm.Sdk;     using Microsoft.Xrm.Sdk.Query;     using System.Colle ...

  6. 【转】SQL Server 2008 新类型介绍之Date和Time

     转自CSDN TJVictor专栏:http://blog.csdn.net/tjvictor/archive/2009/07/13/4344429.aspx   SQL Server 2008除了 ...

  7. windows全系列激活脚本-改良版.cmd

    @ECHO OFFTITLE Windows 全版本系统激活cscript //nologo %Systemroot%\system32\slmgr.vbs -skms 10.1.1.12ECHO 检 ...

  8. [转载]【虚拟化系列】VMware vSphere 5.1 网络管理

    转载自:http://mabofeng.blog.51cto.com/2661587/1020375 网络是VMware vSphere 5.1的基础,所有虚拟机都需要网络来进行通信.如果将所有的虚拟 ...

  9. 选择 GCD 还是 NSTimer

    我们常常会延迟某件任务的执行,或者让某件任务周期性的执行.然后也会在某些时候需要取消掉之前延迟执行的任务. 延迟操作的方案一般有三种: 1.NSObject的方法: gcdTimer 2.使用NSTi ...

  10. C#程序员知识体系

    [https://blog.csdn.net/zj735539703/article/details/50409476] 基础部分 C# 基础语法 OOP的概念,面向对象的理解 继承 封装 多态 AS ...