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

時間 2019-12-13

標籤頁面插入視頻方法 video embed iframe 總結欄目 CSS 简体版

原文原文鏈接

1. video標籤

當前主流的方法固然是HTML5中的video標籤了，可是html

當前，video 元素只支持三種視頻格式：web

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件瀏覽器

MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件ide

WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件oop

若是你的視頻文件是mp4格式的，那麼推薦使用video標籤，兼容PC端和移動端。post

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屬性介紹ui

【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端，移動端無效

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

3. 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 name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
 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 class="container">
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>