[视频相关1]页面中插入视频的方法---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>
但是一般不会同一个视频生成MP4、ogg、webm三种格式的视频去进行兼容,原因是太占用时间了。
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]页面中插入视频的方法---video/embed/iframe总结相关推荐
- html5中加视频的代码,向HTML中插入视频并兼容所有浏览器的方法
向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼 最常用的向HTML中插入视频的方法有两种,一种是古老的标签,一 ...
- H5:使用video标签在页面中插入视频
常用属性和值: 例: <!DOCTYPE html> <html><head><meta charset="utf-8" />< ...
- 【在PowerPoint中插入视频的三种方法】
为了能更好地帮助大家合理地在PowerPoint课件中插入和播放视频文件, 在PowerPoint中插入视频的三种方法 ,本文特向大家介绍PowerPoint中插入和处理视频的三种方法. 直接播放视频 ...
- CSS3之利用选择器和content属性在页面中插入内容
CSS3之使用选择器在页面中插入内容 1. 使用选择器来插入内容:例, h2:before{ content:'COLUMN'; color:white: background-color:o ...
- html中插人视频教程,HTML中插入视频并兼容所有浏览器
向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼 最常用的向HTML中插入视频的方法有两种,一种是古老的标签,一 ...
- java html中引入视频的格式_怎么在HTML网页中插入视频
展开全部 向HTML中插入视频有两种方法e68a8462616964757a686964616f31333366306433,一种是古老的object标签,一种是html5中的video标签. 前者兼 ...
- iframe内容适应div大小_使用lt;iframegt;方式在WordPress中插入视频并自适应屏幕尺寸
工作室今天发布了一篇文章,需要插入一段视频,说起来也不是多大的事情,国内很多主题都直接带视频插入功能(比如Kratos),也可以采用插件的方式(比如Smartideo),当然也可以使用今天提到的方法. ...
- HTML网页中插入视频的方法
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
- 在matlab中怎么录制音频_怎么录制淘宝页面中的视频?简单方法,轻松搞定
原标题:怎么录制淘宝页面中的视频?简单方法,轻松搞定 怎么录制淘宝页面中的视频?当前足不出户,大家就可以在很多的电商平台购买到自己心仪的商品.这其中商机也就产生了,如果不太想上班,或者说想要自己当老板 ...
最新文章
- 外观模式 - 设计模式学习
- pandas.series的数据定位为什么用两个左中括号[[
- 读取数据库信息构建视图字段的备注信息,方便程序代码生成
- Java小程序2(2015-8-2)
- java 命令读取参数_如何读取/处理命令行参数?
- 【遥感数字图像处理】实验:遥感图像显示与数据输入/输出(Erdas版)
- hadoop 提交程序并监控运行
- MySql命令行基本操作
- android serialport new 软件退出_基于Android9.0,了解Android启动流程
- BRI OS 高级ping
- Leetcode 538.二叉树转换为累加树
- Java是块级作用域吗_javascirpt如何模仿块级作用域(js高程笔记)
- 视频消重软件大全 视频md5修改器哪个好用
- python wmic_wmic linux python
- D3基础 | 条形图
- python自动点赞_python3 爬虫学习:自动给你心上人的微博点赞(二)
- 触摸屏技术属于计算机技术中的什么,触摸屏技术
- SRILM文档分析之Prob.h
- 路行助手无法使用_路行助手app
- C/C++ 病毒破坏手法总结