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

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>

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

时间: 2024-10-10 07:17:56

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

转:HTML网页中插入视频各种方法

现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE 9.Chrome),都不支持的(IE6.7.8).好吧,现在让我们从技术层面来认识HTML 5的视频,包括video标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件. Video标签的使用 Video标签含有src.poster.preload.autoplay.loop.control

【转】向HTML中插入视频并兼容所有浏览器的方法

原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼 最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. 前者的兼容性没得说,但是使用起来不太方便,后者使用起来很方便,但是兼容性让人头疼. 虽然后

向HTML中插入视频并兼容所有浏览器的方法

最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. 前者的兼容性没得说,但是使用起来不太方便,后者使用起来很方便,但是兼容性让人头疼. 虽然后者兼容性存在很多问题,但是因为使用很方便,符合未来网页设计发展的趋势,因此我们以后者为主要的插入视频的方法,因为它兼容性的问题,前者作为辅助. 代码如下: <video width="602px"

向HTML中插入视频,兼容所有浏览器

最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. 前者的兼容性没得说,但是使用起来不太方便,后者使用起来很方便,但是兼容性让人头疼. 虽然后者兼容性存在很多问题,但是因为使用很方便,符合未来网页设计发展的趋势,因此我们以后者为主要的插入视频的方法,因为它兼容性的问题,前者作为辅助. 示例如下: <video width="602px"

页面中插入CSS样式的三种方法

页面中插入css样式的三种方法总结 1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. <link>标签在(文档的)头部: <head> <link rel="stylesheet" type="text/css" href="path/myCss.css"/> <

使用选择器在页面中插入内容

我不知道是否有其他人能看见我写的内容,由于我是一个渣渣,很多内容都不知道,所以将这些很简单的东西都记录下来,希望不小心点进来的大神们,能吐槽一下我,呃指点一下我.和我一样的小白们希望能相互学习,谢谢了. 在css中可以使用before伪元素选择器 after伪元素选择器在页面中插入内容,而插入的内容由content属性来定义     一:使用选择器来插入文字 使用选择器来插入文字,在插入的内容是文字时要在文字的两旁加入单引号或者双引号. 为了使插入的内容美观,可以在选择器中加入添加的内容的样式

如何在html中插入视频

如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性  用mp4格式 <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width:视频宽度 height:视频高度

在页面中插入flash的代码实例

在页面中插入flash的代码实例: 有时候网页中需要插入一个flash,作为一个媒体文件,将其引入当然需要一定的格式,下面就介绍一下如何实现辞此功能,不过建议还是使用工具插入,比如使用DW,它就有专门的可视化工具直接点击按钮插入就可以了. 代码如下: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="62" height="62" type="a

4K高清播放机播放NAS中的视频电影方法教程(解决网络共享中找不到NFS文件夹的)

4K高清播放机播放NAS中的视频电影方法教程(解决网络共享中找不到NFS文件夹的方法)(所有4K高清播放机通用) 一 :工具1.亿格瑞A10播放器(理论上所有的4K播放器都支持此操作).2.自己群晖NAS家庭存储服务器. 二.NAS存储服务器的NFS权限设置教程图文说明 1. 先登录自己的NAS,然后登录后就打开File Station,在里面新建立一个Video视频目录,就是自己的存储目录.把这个目录的权限:"本地群组"和"本地用户组,都选择为可读写.当然你自己比较懂NAS