码迷,mamicode.com
首页 > 其他好文 > 详细

页面中插入视频的方法---video/embed/iframe总结

时间:2018-05-31 19:18:51      阅读:4768      评论:0      收藏:0      [点我收藏+]

标签:ada   格式   .net   ini   port   center   back   无限   预加载   

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单位。

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总结

标签:ada   格式   .net   ini   port   center   back   无限   预加载   

原文地址:https://www.cnblogs.com/zhaowy/p/9117785.html

(1)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!