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

系统管理员 2021-07-05 01:46 493阅读 0赞

## 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端，移动端无效**

## 3. `iframe`标签 ##

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

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

最后附上我的测试代码

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

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

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

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

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

`<iframe>`嵌入窗体，确实支持。。。这也是本文记录的重点！

下面开始引用其他文章内容，懒得写了：

`iframe`属性：

*  `allowtransparency` `iframe`所载加页的背景颜色设置为`transparent`(透明)时`iframe`将透明化。
 *  `allowfullscreen` 启用 `iframe` 的内容以在全屏模式下显示。如果缺少，则仅`iframe`（而非框架内的内容）可以进入全屏模式。
 *  `frameborder` 是否显示 `iframe` 周围的边框。

一般视频播放窗口下方会有分享代码：视频地址、`flash`地址、`html`代码、通用代码 等。。 我们用通用代码就能得到`iframe`的地址。

**优酷视频（只能全屏播放）：**  
视频地址：http://v.youku.com/v\_show/id\_XNzExOTkwMjA0.html  
视频ID：XNzExOTkwMjA0  
嵌入地址：http://player.youku.com/embed/XODY3NDMzNjY4

通用代码

**土豆视频（微信里可以页面播放也能全屏）：**  
视频地址（它会用N种网址格式他奶奶的，但都是最后一个是ID）：

http://www.tudou.com/albumplay/pKeQTGfodCI/Wg717X9s4ZM.html
    http://www.tudou.com/albumplay/Wg717X9s4ZM.html
    http://www.tudou.com/programs/view/Wg717X9s4ZM/
    http://www.tudou.com/listplay/F4vaUJb5LoY/Wg717X9s4ZM.html

--------------------

这里不一定正确：测试的时候，对于

www.tudou.com/albumplay/Wg717X9s4ZM.html

`albumplay/xx.html`一个结尾的，下方的`iframe`的`code=xx`可能无效。此时地址是 code=??&lcode=xx，但是code=??不知道是通过什么加密算出来的，`lcode=xx`是正确的。  
视频ID：Wg717X9s4ZM  
嵌入地址：`http://www.tudou.com/programs/view/html5embed.action?code=Wg717X9s4ZM`

通用代码

**腾讯视频（微信里可以页面播放但不能全屏）：**  
视频地址：http://v.qq.com/cover/k/khyb6moudi5fha4.html?vid=d0015bg8v6k  
视频ID：d0015bg8v6k  
嵌入地址：http://v.qq.com/iframe/player.html?vid=d0015bg8v6k&tiny=0&auto=0  
其它参数：auto=0 不自动播放，去掉 auto=0则会自动放

通用代码

上述的3个，腾讯，优酷，土豆基本是可以使用的，我看了几个主要的视频网站，也就是这3个能通过`url`来匹配出`iframe`的`src`，其他基本都不行。

优酷收购了土豆  
搜狐收购了56

**搜狐，新浪，网易，56，ku6，youtobe(仅有`iframe`，`video`标签)都没法匹配到，只好放弃**

--------------------

最后，放到手机上一展示。。。

仅 “腾讯” 的可以播放！优酷，土豆手机端调用的iframe代码不支持为什么报错！！！！！无解了！！！

--------------------

兼容手机真是麻烦，还是自己上传视频，嵌入video标签，视频格式必须是video支持的几种，才能PC和Mobile通用！