HTML5的媒体元素及iframe框架的使用

video元素的基本语法

<video src="../Ajax+加载单一信息.mp4" width="1000" height="500" controls>您的浏览器不支持video标签</video>
  1. src属性指定要播放的视频文件路径
  2. controls属性用于提供播放、暂停、和音量控件,width和height设置视频的宽高
<!--video元素的应用-->

<video controls autoplay>
	<source src="../SpringMVC.mp4"/>
	<source src="../SpringMVC.webm" />
	您的浏览器不支持video标签
</video>
  1. 使用source元素来链接到不同的视频文件,浏览器会自动选择第一个可以识别的格式
  2. 设置autoplay属性后,不需要与用户进行任何交互,就可以让视频文件加载完成后自动播放,目前被禁用
  3. 设置muted属性后,会自动播放,处于静音状态

audio元素的基本语法

<audio src="雨宗林 - 别把疼你的人弄丢了.mp4" controls >您的浏览器不支持audio标签</audio>
<!--audio元素的应用-->
<audio controls >
	<source src="雨宗林 - 别把疼你的人弄丢了.mp4">
	<source src="雨宗林 - 别把疼你的人弄丢了.ogg">
        您的浏览器不支持audio标签
</audio>

   

<iframe>的语法

	<iframe name="myiframe" src="http://www.baidu.com" width="1500px" height="236px"></iframe>
	<a href="https://www.jd.com" target="myiframe">京东</a>
  1. 在被打开的框架上加name属性
  2. 在超链接上设置target目标窗口属性为希望显示的框架窗口名

原文地址:https://www.cnblogs.com/huazhiling/p/11506408.html

时间: 2024-11-01 23:25:54

HTML5的媒体元素及iframe框架的使用的相关文章

HTML5新媒体元素

新媒体元素 audio 示例 //controls表示向用户显示控件<audio controls> <source src="house.mp3"></audio> 标签定义和说明 定义音频(声音) 支持三种文件格式:MP3.Wav.Ogg 浏览器 支持 IE MP3 谷歌 3 火狐 3 欧朋 3 提示和注释  可以在 和 之间放置文本内容,这些文本信息将会被显示在那些不支持 标签的浏览器中. 属性 属性 描述 autoplay 音频自动播放 co

HTML5 第二章 列表和表格和媒体元素

列表: (1)什么是列表? 列表就是信息资源的一种展示形式. (2)无序列表: 语法: <ul> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ul> (3)有序列表: 语法: <ol> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ol> (4

HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. 以下就为大家開始介绍媒体元素的相关事件. abort:触发时机是下载中断. canplay:在能够播放的时候,readyState的值为2的时候触发. canplaythrough:readyState的值为3的时候,触发.播放能够继续,而应该不会中断的时候触发. canshowcurrentfr

HTML5实战与剖析之媒体元素

随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML5中的媒体标签video标签和audio标签支持的非常好.这就使HTML5在移动端很流行. video标签和audio标签也提供了很实用的JavaScript API,允许创建自定义的控件.两个标签的用法如下. HTML代码 view source print? 1.<!-- 视频标签 --> 2

HTML5实战与剖析之媒体元素(4、检测编解码器的支持和Audio构造函数)

HTML5媒体元素检测编解码器的支持情况 虽然媒体元素可以实现音频和视频功能,但是并不是所有浏览器都支持video标签和audio标签的所有编解码器,这意味着开发人员必须提供很多歌媒体来源.在JavaScript API中能够检测浏览器是否支持某种格式和编解码器.这两个媒体元素都有一个canPlayType()方法,该方法接收一种格式/编解码器字符串,返回"probably"."maybe"或者""(空字符串).空字符串是假值,而"pr

HTML5实战与剖析之媒体元素(6、视频实例)

HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比较多.因为手机端基本上废除了flash的独断,让HTML5当家做主人,所以对视频支持的比较好.所以今天专门为大家奉上HTML5视频标签模拟视频播放器的小例子,让大家更好的理解HTML5和有效的应用在项目中. HTML代码 <!-- src中放上本地的ogv的音频 --> <video id="v1" src="Intermission-Walk-in.ogv"></vid

javascript_获取iframe框架中元素节点的属性值

1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档. 2. JS原生方法获得iframe的window对象 document.getElementById("ifr").contentWindow; 3. 获取iframe框架的思路: (1)找到iframe框架 (2)获取iframe框架的window对象 (3)获取w

(selenium+python)_UI自动化04_定位iframe框架内元素

什么是iframe? iframe是HTML标签,作用是文档中的文档(即在当前 HTML 文档中嵌入另一个HTML文档),或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架(即行内框架). iframe框架内元素定位 selenium中定位iframe内元素,需先切换到iframe框架内,然后再进行元素定位,否则会报错找不到元素. 一.iframe常用切换 driver.switch_to_frame(iframe_element) # 切换至iframe drive

第二章 列表、表格与媒体元素

一.无序列表 <ul>       <li>无序列表</li>       <li>有序列表</li>       <li>自定义列表</li>      </ul> 特性:1.没有顺序,每个<li>标签独占一行(块级元素)        2.默认每一个li标签前有一个实心小圆点        3.主要用于无序类型信息的展示,如导航栏等 二.有序列表 <ol>       <li&