zoukankan      html  css  js  c++  java
  • html5 video

    先简要概述一下video标签:

    video:嵌入视频到页面中

    1. 声明video标签

    单个视频的时候使用src:

    <video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
      Your browser does not support the <code>video</code> element.
    </video>

    多个视频的时候使用<source>标签:

    <video controls>
      <source src="SampleVideo.ogv" type="video/ogv">
      <source src="SampleVideo.mp4" type="video/mp4">
      Your browser does not support the <code>video</code> element.
    </video>

    浏览器会先去识别是否支持Ogg格式文件,如果不支持,就读取MPEG-4的文件。同时可以规定编码格式,如下:

    <video controls>
      <source src="SampleVideo.ogv" type="video/ogv; codecs=dirac, speex">
      Your browser does not support the <code>video</code> element.
    </video>

    2. 视频格式

    不同的浏览器支持的格式不同参考Media formats supported by the audio and video elements

    image

    经验总结:

    通常嵌入的视频无法播放是2个原因,第一个是视频格式浏览器不支持,第二个原因是没有安装播放支持的插件。因为内嵌视频实际上会耗费很大资源,同时存在十分严重的兼容性问题,所以通常鼓励的事将视频嵌入到第三方播放网站执行。

    提供几个方便实用的网站:

    1. flowplayer:上传文件之后,自动生成文件链接,可以直接嵌入html页面中,支持HTML5(不过要付费。。。)

    image

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>video</title>
    </head>
    <body>
        <video controls>
            <source type="application/x-mpegurl" src="http://cdn.flowplayer.org/202777/96295-sunsetthroughsomeflowers2W1tsD5OeH.m3u8">
            <source type="video/webm" src="http://cdn.flowplayer.org/202777/96295-sunsetthroughsomeflowers2W1tsD5OeH.webm">
            <source type="video/mp4" src="http://cdn.flowplayer.org/202777/96295-sunsetthroughsomeflowers2W1tsD5OeH.mp4">
        </video>
    </body>
    </html>

    新建页面,执行代码,可以看到支持HTML5的浏览器可以进行视频播放。

    2. Video for Everybody: 兼容各大浏览器中关于video的问题,同时有一些关于视频压缩格式的建议

    image

    3. mediaelementjs: 推荐的补丁

    image

    4. vid.ly: 在线转换视频网站(只能免费转换一个视频)

    image

    4. online-convert:在线转换视频网站

    image

    参考资料:

    1. MDN:HTMLVideoElement

    2. MDN:Using HTML5 audio and video

    3. MDN:<video>

    4. html5please

  • 相关阅读:
    Hadoop综合大作业
    hive基本操作与应用
    理解MapReduce计算构架
    熟悉HBase基本操作
    Hadoop综合大作业
    hive基本操作与应用
    理解MapReduce计算构架
    熟悉HBase基本操作
    熟悉常用的HDFS操作
    爬虫大作业
  • 原文地址:https://www.cnblogs.com/Candybunny/p/5597529.html
Copyright © 2011-2022 走看看