1. video標簽
當前主流的方法當然是HTML5中的video標簽了，但是
當前，video 元素只支持三種視頻格式：
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單位。
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>