页面中插入视频的方法---video/embed/iframe总结
Posted zhaowy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面中插入视频的方法---video/embed/iframe总结相关的知识，希望对你有一定的参考价值。
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>
以上是关于页面中插入视频的方法---video/embed/iframe总结的主要内容，如果未能解决你的问题，请参考以下文章