学习笔记

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

查看其它板块

html5视频添加图片

作者:狐灵科技 | 2020-03-18 21:45 |点击:

  在网页上插入视频 最简单的方法就是 使用html5

  HTML 5 视频

  Web 上的视频

  直到现在,仍然不存在一项旨在网页上显示视频的标准。

  今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。

  HTML5 规定了一种通过 video 元素来包含视频的标准方法。

  视频格式

当前,video 元素支持三种视频格式:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件


网页中单纯的插入视频参考代码
 

改成
 
  1. <!DOCTYPE HTML>
    <html>
    <body>
     
    <video width="320" height="240" controls="controls">
      <source src="/i/movie.ogg" type="video/ogg">
      <source src="/i/movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
     
    </body>
    </html>
     


带有图片封面的视频参考代码
 
  1. <video controls="controls" webkit-playsinline="" playsinline="" x5-playsinline="" 
    src="http://www.zhihuijiaju.cn/9.mp4" poster="http://img.yzcdn.cn/upload_files/2019/06/28/FpAdIbPJqujsXhcPePjl-u9rDRzP.jpg" controlslist="">
        当前浏览器不支持最新的video播放
    </video>
 

如没特殊注明,文章均为狐灵科技原创,转载请注明   "html5视频添加图片
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:15082661954 / 大客户专线:15523356218