风神修罗使
风神修罗使

页面中插入视频的方法---video/embed/iframe总结

1. video标签

当前主流的方法当然是HTML5中的video标签了，但是

当前，video 元素只支持三种视频格式：

  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
  • MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

如果你的视频文件是mp4格式的，那么推荐使用video标签，兼容PC端和移动端。

mp4格式文件兼容IE9+、Chrome和Safari，ogg和webm格式兼容Firefox、Opera和Chrome。最好配合使用。

上代码


<video src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" poster="false.png" 
       autoplay="autoplay" controls="controls" loop="-1">
    <p>你的浏览器不支持video标签.p>
video>


<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  object> 
video>

video属性介绍

  • 【src】指定视频的地址。
  • 【poster】用于指定一张图片，在当前视频数据无效时显示。
  • 【preload】用于定义视频是否预加载。none（不预加载）、metadata（部分预加载）、auto（全部预加载)。如果不使用此属性，默认为auto。如果使用 “autoplay”，则忽略该属性。
  • 【autoplay】设置视频是否自动播放。是一个布尔属性。当出现时，表示自动播放，去掉表示不自动播放。autoplay=“autoplay”
  • 【loop】设置视频是否循环播放，同样是一个布尔属性。当出现时，表示循环播放。去掉表示不循环播放。 loop=“loop”
    。如果值是2指播放两次。负值也表示无限次播放
  • 【controls 】设置是否显示播放控制栏。controls=“controls”
  • 【width/height】设置视频的宽度和高度，不需要加px单位。

2. embed标签

如果使用的是flash文件或者其他video标签不支持的格式。那么可以使用embed标签插入。
embed标签属性有width/height/src/type 其他不支持。

embed标签只支持PC端，移动端无效

<embed src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">

3. iframe标签

目前好多引入的视频是从各大主流视频网站直接拿到的，那么目前的解决方法是用iframe插入。

<iframe frameborder="0" src="https://v.qq.com/iframe/player.html?vid=i0670jbe37a&tiny=0&auto=0" allowfullscreen>iframe>

src属性的auto=0设置不自动播放，删除可自动播放，但是现在好多移动端因为流量问题都不支持自动播放。vid是视频的地址。一般修改为你需要加载的视频ID即可。

最后附上我的测试代码


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试视频标签title>
  <style>
    .container{
      
      width: 100%;
      margin: 0 auto;
      border: 1px solid #f00;
      text-align: center;
    }
    video,embed,iframe{
      
      border: 1px solid #000;
      width: 100%;
    }
  style>
head>
<body>
  <div class="container">
    <h1>video标签--只支持mp4格式h1>
    <video src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" autoplay="autoplay" controls="controls" loop="-1" poster="false.png">
    video>
    <h1>embed标签--不支持移动端h1>
    <embed src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <h1>iframe标签--全支持h1>
    <iframe frameborder="0" src="https://v.qq.com/iframe/player.html?vid=i0670jbe37a&tiny=0" allowfullscreen>iframe>
  div>
body>
html>

使用 iframe 引用优酷和土豆和腾讯视频，支持 HTML5 手机 播放

写博客，只为记录项目中碰到的问题

使用百度视频上传，嵌入远程链接，然后在编辑器中自动转换为支持视频播放的html代码。

例如：

简单了修改了百度编辑器源码

默认的百度编辑器针对视频的处理有2种：

  1. 远程链接，会生成 标签
  2. 本地上传视频，会生成 标签，video是html5的标签，现在大多数浏览器都使用了，但是其支持的格式可能不是很多，具体也没研究，这个工作量太大，而且得不到想要的结果。（video标签的另一个主要作用是：在手机端也可以播放）

百度编辑器，主要是为了pc端，在移动端，就像上面提到的：

video标签，mobile应该也支持，但是video标签支持的格式有限。我们可以自己查看video标签支持的格式，然后使用 “格式工厂” 之类的软件进行转换为mp4等支持的格式

embed标签，还有什么object标签，在mobile端都不显示，它们貌似好像需要flash插件的安装，手机端或mac浏览器等不一定支持

最后，找了些资料，但是不确定，并不是技术狂人那样深入研究，PC和MOBILE通用的标签是：