頁面中插入視頻的方法 ---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。最好配合使用。

上代碼

 1 <!--全屬性-->
 2 <video src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" poster="false.png" 
 3        autoplay="autoplay" controls="controls" loop="-1">
 4     <p>你的瀏覽器不支持video標籤.</p>
 5 </video>
 6 
 7 <!--優雅降級-->
 8 <video width="320" height="240" controls>
 9   <source src="movie.mp4" type="video/mp4"><!--兼容IE9+、Chrome和Safari-->
10   <source src="movie.ogg" type="video/ogg"><!--兼容Firefox、Opera和Chrome-->
11   <source src="movie.webm" type="video/webm"><!--兼容Firefox、Opera和Chrome-->
12   <object data="movie.mp4" width="320" height="240">
13     <embed src="movie.swf" width="320" height="240">
14   </object> 
15 </video>

video 屬性介紹

【src】指定視頻的地址。
【poster】用於指定一張圖片，在當前視頻數據無效時顯示。
【preload】用於定義視頻是否預加載。none（不預加載）、metadata（部分預加載）、auto（全部預加載)。如果不使用此屬性，默認爲 auto。如果使用 "autoplay"，則忽略該屬性。
【autoplay】設置視頻是否自動播放。是一個布爾屬性。當出現時，表示自動播放，去掉表示不自動播放。autoplay="autoplay"
【loop】設置視頻是否循環播放，同樣是一個布爾屬性。當出現時，表示循環播放。去掉表示不循環播放。 loop="loop" 。如果值是 2 指播放兩次。負值也表示無限次播放
【controls 】設置是否顯示播放控制欄。controls="controls"
【width/height】設置視頻的寬度和高度，不需要加 px 單位。

  1. embed 標籤

如果使用的是 flash 文件或者其他 video 標籤不支持的格式。那麼可以使用 embed 標籤插入。

embed 標籤屬性有 width/height/src/type 其他不支持。

embed 標籤只支持 PC 端，移動端無效

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

目前好多引入的視頻是從各大主流視頻網站直接拿到的，那麼目前的解決方法是用 iframe 插入。

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

src 屬性的 auto=0 設置不自動播放，刪除可自動播放，但是現在好多移動端因爲流量問題都不支持自動播放。vid 是視頻的地址。一般修改爲你需要加載的視頻 ID 即可。

最後附上我的測試代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta >
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>測試視頻標籤</title>
 8   <style>
 9     .container{
10       width: 100%;
11       margin: 0 auto;
12       border: 1px solid #f00;
13       text-align: center;
14     }
15     video,embed,iframe{
16       border: 1px solid #000;
17       width: 100%;
18     }
19   </style>
20 </head>
21 <body>
22   <div>
23     <h1>video標籤--只支持mp4格式</h1>
24     <video src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" autoplay="autoplay" controls="controls" loop="-1" poster="false.png">
25     </video>
26     <h1>embed標籤--不支持移動端</h1>
27     <embed src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
28     <h1>iframe標籤--全支持</h1>
29     <iframe frameborder="0" src="https://v.qq.com/iframe/player.html?vid=i0670jbe37a&tiny=0" allowfullscreen></iframe>
30   </div>
31 </body>
32 </html>

本文地址：http://www.cnblogs.com/zhaowy/

版權聲明：本文爲原創文章，版權歸 作者所有，歡迎分享本文，轉載請保留出處！

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://www.cnblogs.com/zhaowy/p/9117785.html

猜你喜歡