Html5中的Video元素使用方法

现在互联网视频大都使用Flash来实现。但是不同的浏览器可能使用不同的插件。在HTML5中则提供了一个统一的方式来展示视频内容。HTML5 video在Internet Explorer 9, Firefox, Opera, Chrome, 和Safari都支持。IE8及其更早的浏览器不支持。

 代码如下

<SPAN style="COLOR: #000000"><video width="320" height="240" controls="controls" id="gbin1">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

 </SPAN>
 

以上的控制属性可以添加视频相关的控制,例如,播放,暂停和音量。当然,如果必要我们也需要添加高度和宽度。如果高和宽设定后,页面加载后针对这个视频的区域的大小会预留出来。如果没有相关高和宽的属性,浏览器则不能正确预留显示视频区域。效果就是页面加载过程中,页面布局可能变化。

应该在<video>和</video>元素内容间加入文字内容,这样可以保证如果浏览器不支持video标签。页面能够显示正确的文字。


 video标签允许加入多个<source>元素。这些元素可以链接到不同的视频文件。当然,浏览器会使用第一个识别出的格式。目前,<video>标签支持3类文件格式 :MP4, webM和Ogg

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS3-背景(background-image、background-size、background-origin、background-clip)

CSS3中新的背景属性&#xff1a;background-image、background-size、background-origin、background-clip 背景图片&#xff1a;background-image CSS3中可以通过background-image属性添加背景图片。 不同的背景图像和图像用逗号隔开&#xff0c;所有的图片中显示在最顶端的为…

使用String.intern()减少内存使用

时不时地会有一个垂死的生产应用程序。 而且您知道您需要尽快对其进行修补。 我们也一样&#xff0c;并认为分享最近的一个战争故事将很有趣。 在这种情况下&#xff0c;我们就有机会使用String.intern&#xff08;&#xff09;之类的简单补丁来修补应用程序。 但是&#xff0c…

CSS实现比翼双飞和圣杯布局模型效果

圣杯模型和比翼双飞模型主要的特指1.首先加载的是中间部分&#xff0c;其次是左边&#xff0c;然后是右边 2.中间是自适应&#xff0c;二边是定宽 实现方法1.grid2.margin float position:releative父亲加padding 挤进去3.margin float box-size:border-box 1.gridhtml:&l…

java struts2 excel上传_文件上传方法,使用Struts2,实现Excel文件读取并写入数据库技术...

文件上传方法&#xff0c;使用Struts2&#xff0c;实现Excel文件读取并写入数据库技术如题&#xff1a;文件信息的批量导入……项目中经常会遇到客户的一些单表信息的数据批量导入&#xff0c;也就是提供定制Excel表&#xff0c;再把Excel表中的数据提取到数据库的操作&#xf…

jmeter创建高级测试计划

如果应用程序使用重写地址而不是使用cookie存储信息&#xff0c;需要做一些额外的工作去测试程序 为了正确的响应重写地址&#xff0c;jmeter 需要解析 从服务器获取html 并且检索会话ID, 1 合理利用pre-processors-http url rewriting modifier 来完成&#xff0c;简单的输入s…

从这开始

今天正式加入博客园&#xff01; 今后跟大家分享有关IoT软件方面的知识&#xff0c;包括WIFI 、蓝牙、Zigbee、 Sub-1G 、NB-IoT、GPRS/GPS和单片机等。 有疑问欢迎留言联系&#xff01;转载于:https://www.cnblogs.com/crepse/p/9502342.html

单元测试技巧:创建描述性测试

您的单元测试应尽可能具有描述性。 他们给您的反馈应该非常清楚&#xff0c;您甚至不需要启动调试器并一步一步地检查代码来检查局部变量。 为什么&#xff1f; 因为那需要时间&#xff0c;而且我们很懒&#xff0c;对吗&#xff1f; 为此&#xff0c;您需要创建描述性测试。 有…

Div前台显示自动换行和不自动换行的问题

1、无法自动换行* 问题&#xff1a;如果 div 输入的是英文字母且没有空格&#xff0c;会导致英文字母不换行直接在同一行输出&#xff0c;导致 div 的宽度远远超出设定的大小。* 原因&#xff1a;因为在 div 中&#xff0c;英文字母之间没有空格的话&#xff0c;默认为一个英文…

java 自定义taglib_java – 非常简单的自定义taglib函数无法正常工作

我正在敲打为什么我的自定义taglib功能不起作用.该示例使用Math.cos和Math.sin.这是班级&#xff1a;package foo.tags;public class Math {public java.lang.Double cos(java.lang.Double value) {return java.lang.Math.cos(value);}public java.lang.Double sin(java.lang.D…

python基础知识(二)if语句

if语句是条件判断语句 格式为&#xff1a; if 条件:执行语句 elif 再一个条件:执行语句 else:执行语句注意&#xff1a; if 与elif后不要忘记冒号 例子&#xff1a; #Autor:Decade value156 value2int(input(number:)) #提示用户输入一个整数型的数字 if value1>value2: …

vue.js--基础事件定义,获取数据,执行方法传值

<template><div id"app"> <h1>{{ msg }}</h1> <br> <button v-on:click"run1()"> 第一种写法</button> <br> <button clickrun2()> 第二种写法</button> <br> <button clickgetMsg(…

Spring集成–强大的拆分器聚合器

坚固是什么意思&#xff1f; 在本文的上下文中&#xff0c;健壮性是指在不立即返回到调用者的情况下管理流中的异常条件的能力。 在某些处理方案中&#xff0c; n个 m个回答足以做出结论。 通常具有这些趋势的示例处理场景是&#xff1a; 财务&#xff0c;保险和预订系统的…

CSS字体设置的一些技巧(行高,加粗,强制换行等)

文本是网页中最重要的一种内容形式&#xff0c;文本几乎可以写在任何地方&#xff0c;块级元素中可以写行内元素中也可以写。文本都是由一个个字符组成的&#xff0c;在css布局中&#xff0c;每一个字符都有一个em框&#xff0c;通常font-size设置的大小就是设置的em框的大小&a…

java memcache 队列_基于memcache的java分布式队列实现。

主要有两个类&#xff0c;一个队列类和一个job的抽象类。保证队列类中的key的唯一性&#xff0c;就可以用spring配置多个实例。水平有限&#xff0c;欢迎吐槽。上代码&#xff1a;1、队列类import net.spy.memcached.MemcachedClient;import net.spy.memcached.internal.Operat…

【题解】 [ZJOI2009]假期的宿舍 (二分图匹配)

懒得复制题面&#xff0c;戳我 Solution: 处理出床位、要留校的人&#xff08;注意来访问的人一定住校&#xff09;&#xff0c;和人与人的关系&#xff08;连边&#xff09;再接着就是二分图。注意的就是连向的人必须是有床位的还要注意的就是只用判断住校的同学二分图板子都打…

android-线程池-最顺手的写法

引子 关于线程池&#xff0c;在这里写出几种最顺手的写法&#xff0c;至于原理以及各种细节。放后面再填&#xff1b; 经过查证&#xff0c;凡是 以前new Thread&#xff08;&#xff09;的地方&#xff0c;貌似都可以用线程池来执行&#xff0c;优化内存消耗。 代码 系统提供的…

使用Java和Google GSON解析ESPN API

在我的第一篇文章中&#xff0c;我将解释如何解析ESPN API。 可以在http://developer.espn.com/docs上找到API文档。 首先&#xff0c;您需要请求一个API密钥&#xff0c;然后可以开始查询REST API以检索JSON响应。 在下面的示例中&#xff0c;我将简单地查询在英格兰英超联赛…

java string对象创建对象_Java String 创建了几个对象

我们首先来看一段代码&#xff1a;Java代码String strnew String("abc");紧接着这段代码之后的往往是这个问题&#xff0c;那就是这行代码究竟创建了几个String对象呢&#xff1f;相信大家对这道题并不陌生&#xff0c;答案也是众所周知的&#xff0c;2个。接下来我们…

js 图片不保存的回显功能/图片尺寸验证/图片大小验证 /图片类型验证

大部分转自&#xff1a;http://blog.csdn.net/qq_39200924/article/details/79198766 在项目中经常用到input标签来上传文件&#xff0c;而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种&#xff0c;就需要对用户上传的文件进行验证&#xff0c;在HTML5中有一个…

sqlx使用说明

sqlx使用指南 参考链接: http://jmoiron.github.io/sqlx/ sqlx是一个go语言包&#xff0c;在内置database/sql包之上增加了很多扩展&#xff0c;简化数据库操作代码的书写 资源 如果对go语言的sql用法不熟悉&#xff0c;可以到下面网站学习:http://go-database-sql.org/ 如果对…