视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
分析H5网页中video标签中的MP4视频无法播放的缘由
2020-11-27 15:33:17 责编:小采
文档


关于<video>标签所支持的视频格式和编码:

  • MP4 = MPEG 4文件使用 H2 视频编解码器和AAC音频编解码器

  • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

  • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

  • 通过上面的信息我们会发现只有h2编码的MP4视频(MPEG-LA公司)、VP8编码的webm格式的视频(Google公司)和Theora编码的ogg格式的视频(iTouch开发)可以支持html5的<video>标签。

    如果浏览器不支持video标签怎么办?

    比如IE浏览器还有老版本的浏览器对html5的支持不太好,当用户用这些浏览器打开我们带有视频的网页怎么办呢?

    我们可以把代码这样写:

    1. <video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300">您的浏览器不支持播放该视频!</video>

    这样在不支持html5的浏览器中就会提示“您的浏览器不支持播放该视频!”啦!

    关于video标签的扩展参数说明:

    video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式,这样我们只要多准备几个不同格式的视频就可以了。

    用法:

    1. <video width="500" height="250" controls="controls">

    2. <source src="movie.ogg" type="video/ogg">

    3. <source src="movie.mp4" type="video/mp4">

    4. 您的浏览器不支持此种视频格式。

    5. </video>

    1. autoplay :出现该属性意味着视频在就绪后将自动播放,用法:autoplay="autoplay"

    2. controls :出现该属性意味着向用户显示控件,如播放按钮等,用法:controls="controls"

    3. height:设置高度 width:设置宽度

    4. loop:自动重播,用法:loop="loop"

    5. preload:视频在页面加载时进行加载并预备播放,用法:preload="auto" - 当页面加载后载入整个视频;preload="meta" - 当页面加载后只载入元数据;preload="none" - 当页面加载后不载入视频。注意:若使用了autoplay,则忽略preload

    6. src:要播放视频的url

    关于<video>标签我就介绍到这里,相信大家都对这个标签已经有了深刻的了解!

    【相关推荐】

    1.html/css免费视频教程

    2. 教你如何使用好HTML5的音频和视频

    3. 教你如何增强H5中video标签在浏览器中的兼容性

    4. 详解HTML5展示视频的标准

    5. 简述<video>标签的参数和属性

    下载本文
    显示全文
    专题