頁面中插入視頻的方法---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"><!--兼容IE9+、Chrome和Safari-->
  <source src="movie.ogg" type="video/ogg"><!--兼容Firefox、Opera和Chrome-->
  <source src="movie.webm" type="video/webm"><!--兼容Firefox、Opera和Chrome-->
  <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即可。

最後附上我的測試代碼

<!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種：

遠程鏈接，會生成 <embed>標籤
本地上傳視頻，會生成 <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

通用代碼

<iframe width="100%%" height="100%" frameborder="0" src="http://player.youku.com/embed/XODY3NDMzNjY4" allowfullscreen=""></iframe>

土豆視頻（微信裏可以頁面播放也能全屏）：
視頻地址（它會用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

通用代碼

<iframe width="100%" height="100%" frameborder="0" src="http://www.tudou.com/programs/view/html5embed.action?code=Wg717X9s4ZM" allowfullscreen=""></iframe>

騰訊視頻（微信裏可以頁面播放但不能全屏）：
視頻地址：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則會自動放

通用代碼

<iframe width="100%" height="100%" frameborder=0 src="http://v.qq.com/iframe/player.html?vid=d0015bg8v6k&tiny=0&auto=0" allowfullscreen=""></iframe>

上述的3個，騰訊，優酷，土豆基本是可以使用的，我看了幾個主要的視頻網站，也就是這3個能通過url來匹配出iframe的src，其他基本都不行。

優酷收購了土豆
搜狐收購了56

搜狐，新浪，網易，56，ku6，youtobe(僅有iframe，video標籤)都沒法匹配到，只好放棄

最後，放到手機上一展示。。。

僅 “騰訊” 的可以播放！優酷，土豆手機端調用的iframe代碼不支持爲什麼報錯！！！！！無解了！！！

兼容手機真是麻煩，還是自己上傳視頻，嵌入video標籤，視頻格式必須是video支持的幾種，才能PC和Mobile通用！

頁面中插入視頻的方法---video/embed/iframe總結

1. `video`標籤

2. `embed`標籤

3. `iframe`標籤

使用 `iframe` 引用優酷和土豆和騰訊視頻，支持 `HTML5` 手機播放

C#開源的兩款功能強大的錄屏神器

認知提升的方法

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

中國古代傳說中的四大神獸

apache設置自動將http跳轉到https的方法

LINQ Interview Questions & Answers(LINQ面試問答)

MDN之Web 開發技術【String.prototype.replace()】

string.prototype.replace 和正則表達式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

頁面中插入視頻的方法---video/embed/iframe總結

1. video標籤

2. embed標籤

3. iframe標籤

使用 iframe 引用優酷和土豆和騰訊視頻，支持 HTML5 手機 播放

1. `video`標籤

2. `embed`標籤

3. `iframe`標籤

使用 `iframe` 引用優酷和土豆和騰訊視頻，支持 `HTML5` 手機播放