页面中插入视频的方法---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 <videosrc="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 <videowidth="320"height="240"controls>
9 <sourcesrc="movie.mp4"type="video/mp4"><!--兼容IE9 、Chrome和Safari-->
10 <sourcesrc="movie.ogg"type="video/ogg"><!--兼容Firefox、Opera和Chrome-->
11 <sourcesrc="movie.webm"type="video/webm"><!--兼容Firefox、Opera和Chrome-->
12 <objectdata="movie.mp4"width="320"height="240">
13 <embedsrc="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 <embedsrc="http://vjs.zencdn.net/v/oceans.mp4"type="video/mp4">
3. iframe标签
目前好多引入的视频是从各大主流视频网站直接拿到的,那么目前的解决方法是用iframe插入。
1 <iframeframeborder="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 <htmllang="en">
3 <head>
4 <metacharset="UTF-8">
5 <metaname="viewport"content="width=device-width, initial-scale=1.0,user-scalable=no">
6 <metahttp-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 <divclass="container">
23 <h1>video标签--只支持mp4格式</h1>
24 <videosrc="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 <embedsrc="http://vjs.zencdn.net/v/oceans.mp4"type="video/mp4">
28 <h1>iframe标签--全支持</h1>
29 <iframeframeborder="0"src="https://v.qq.com/iframe/player.html?vid=i0670jbe37a&tiny=0"allowfullscreen></iframe>
30 </div>
31 </body>
32 </html>
更多专业前端知识,请上 【猿2048】www.mk2048.com
页面中插入视频的方法---video/embed/iframe总结相关推荐
- [视频相关1]页面中插入视频的方法---video/embed/iframe总结
1. video标签 当前主流的方法当然是HTML5中的video标签了,但是 当前,video 元素只支持三种视频格式: Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg ...
- HTML网页中插入视频的方法
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
- 【转】HTML网页中插入视频各种方法
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
- H5:使用video标签在页面中插入视频
常用属性和值: 例: <!DOCTYPE html> <html><head><meta charset="utf-8" />< ...
- 织梦编辑器加HTML视频显示很小,dede织梦编辑器中插入视频文件方法
现在很多客户需要在后台能上传本地的视频,今天符老师就教大家一个比较简单的方法: 织梦编辑器中上传mp4视频文件效果图: (此图片来源于网络,如有侵权,请联系删除! ) 一.首先需要在织梦 系统中添加支 ...
- html5中加视频的代码,向HTML中插入视频并兼容所有浏览器的方法
向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼 最常用的向HTML中插入视频的方法有两种,一种是古老的标签,一 ...
- html中插人视频教程,HTML中插入视频并兼容所有浏览器
向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼 最常用的向HTML中插入视频的方法有两种,一种是古老的标签,一 ...
- java html中引入视频的格式_HTML中插入视频
最常用的向HTML中插入视频的方法有两种,一种是古老的标签,一种是html5中的标签. 前者的兼容性没得说,但是使用起来不太方便,后者使用起来很方便,但是兼容性让人头疼. 虽然后者兼容性存在很多问题, ...
- 【在PowerPoint中插入视频的三种方法】
为了能更好地帮助大家合理地在PowerPoint课件中插入和播放视频文件, 在PowerPoint中插入视频的三种方法 ,本文特向大家介绍PowerPoint中插入和处理视频的三种方法. 直接播放视频 ...
- 在matlab中怎么录制音频_怎么录制淘宝页面中的视频?简单方法,轻松搞定
原标题:怎么录制淘宝页面中的视频?简单方法,轻松搞定 怎么录制淘宝页面中的视频?当前足不出户,大家就可以在很多的电商平台购买到自己心仪的商品.这其中商机也就产生了,如果不太想上班,或者说想要自己当老板 ...
最新文章
- apache忽略文件后缀
- php重置密码,linux密码忘记重置密码的方法
- RxJava 和 RxAndroid 二(操作符的使用)
- c语言中有关void,sizeof,结构体的一些问题
- lzg_ad:FBWF配置详解
- python连接ftp服务器获取文件内容_python 访问ftp服务器文件
- 有这样的开发,产品经理跪着帮你擦汗!
- The process cannot access the file '' because it is being used by another process.....
- 马哥Linux第52期-第四周作业
- 图书馆管理系统UML各种图
- Dreamweaver CS6 完全自学教程 (一)
- 基于深度学习的手写汉字识别
- VUE小需求——旋转小图标
- Python入门:数据结构之字典(dict)(2)
- 完全停止Oracle中正在运行的JOB
- 计算机已被锁定请联系管理员,win7电脑开机收到提示“您的账户已被停用,请向系统管理员咨询”怎么办?...
- 为什么说梯度的反方向是函数下降最快的方向
- Zotero安装配置插件教程: 多端同步、自动翻译、抓取题录信息、参考文献等
- 测试个人禀赋的软件,中医体质自测,个人体质测试,体质健康测试,测试自己的体质...
- revit建模批量标高操作,简单的一匹。