HTML5学习（7）多媒体元素

视频元素video

<video src="./media/xxx.mp4" controls autoplay muted loop></video>

音频元素audio

<audio src="./media/xxx.mp3" controls autoplay muted loop></audio>

布尔属性：值和属性名相同，值可以省略不写。

controls 显示控件

autoplay 自动播放

muted 静音

loop 循环播放

兼容性：

1.这两个元素是HTML5中新增的元素，有些老的浏览器不支持

2.不同的浏览器支持的音视频格式可能不一致，通过下面的写法使播放的成功率变大（mp4和webm是互联网中最常用的视频格式）

<video controls autoplay muted loop>

　　<source src="./media/xxx.mp4">

　　<source src="./media/xxx.webm">

</video>

原文地址：https://www.cnblogs.com/1016391912pm/p/11537985.html

时间： 2024-10-13 16:13:11

HTML5学习（7）多媒体元素的相关文章

HTML5学习：语义元素section

HTML5学习:语义元素section一.定义<section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 二.用法section标签下一般有一个标题<h1></h1>.还有一个内容<p></p>.示例代码如下: <!DOCTYPE html> <html>   <head>     <meta name="content-type" con

HTML5学习：语义元素article

HTML5学习:语义元素article 一.定义<article> 标签定义外部的内容.外部内容可以是来自一篇文章,或者来自博客 的博文,或者是来自论坛的文章. 二.用法格式和上篇的section元素一样:<h1></h1><p></p>,示例代码如下: <!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type"

HTML5学习：语义元素nav

HTML5学习:语义元素nav 一.定义标签<nav>定义导航链接的部分,用来将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读器等设备的支持也更好. 二.用法格式:<nav><a href="#">test</a></nav>,示例代码如下: < !DOCTYPE html> <html>   <head>     <meta http-equiv=&q

Html5学习笔记1 元素 标签 属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

三天学会HTML5 ——多媒体元素的使用

目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分,无论访问的是哪种类型的网页,视频或音频***,在之前实现这些功能对开发人员来说可能非常痛苦,必须依赖Object 标签,调用第三方软件来加载,如Flash等,如果有些设备不支持Flash,我们对此就束手无策了.但是HTML5的出现让多媒体网页开发变得异常简单,也形成了新的标准. 1. 使用Vide

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

[html5] 学习笔记-表单新增的元素与属性（续）

本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indeterminate属性.Image提交按钮的宽高属性. 1.controls属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素. 1 <body> 2 <script> 3 function setValue(){ 4 var label

HTML5学习笔记（四）：H5中表单新增元素及改良

方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: 1 <form id="test" action="test.php" method="get"> 2 <input form="test" type="text" name="name"/> 3 </f

HTML5 学习笔记（二）——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由