<audio>

1、autoplay 自动播放

2、controls 是否显不默认播放控件

3、loop 循环播放

4、preload 预加载 同时设置autoplay时些属性失效

5、由于版权等原因，不同的浏览器可支持播放的格式是不一样的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--<audio src="music/yinyue.mp3" controls autoplay loop></audio>-->

<!--兼容写法-->

<audio controls loop autoplay>

    <source src="music/yinyue.mp3">

    <source src="music/yinyue.ogg">

    <source src="music/yinyue.wav">

    抱歉您的浏览器不支持

</audio>

</body>

</html>

<video>

1、autoplay 自动播放

2、controls 是否显示默认播放控件

3、loop 循环播放

4、preload 预加载，同时设置了autoplay，此属性将失效

5、width 设置播放窗口宽度

6、height 设置播放窗口的高度

7、由于版权等原因，不同的浏览器可支持播放的格式是不一样的

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            text-align: center;

        }

        video{

            width: 1000px;

        }

    </style>

</head>

<body>

<!--<video src="video/movie.mp4" controls  autoplay ></video>-->

<!--  行内块 display:inline-block -->

<video controls autoplay>

    <source src="video/movie.mp4"/>

    <source src="video/movie.ogg"/>

    <source src="video/movie.webm"/>

    抱歉，浏览器要换了！

</video>

</body>

</html>

html5——多媒体（一）的更多相关文章

  1. Html5多媒体相关的API---video

    Html5多媒体相关的API---video 在HTML5中,新增了两个元素---video元素与audio元素,其中video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的 ...

  2. HTML5 多媒体音视频处理

    HTML5 多媒体音视频处理 版权声明:未经博主授权,内容严禁转载 ! 音频处理 - audio HTML5 Audio 音频 目前大多数音频是通过哦插件的形式来播放的. 不同浏览器在网页上播放音频的 ...

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

    目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分 ...

  4. HTML5 多媒体标签

    一.多媒体 embed 标签 embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等.url为音频或视频文件及其路径,可以是相对路径或绝对路径. 语法格式: < ...

  5. html5多媒体Video/Audio

    video:    1.常见的视频格式 视频的组成部分:画面.音频.编码格式 视频编码:H.264.theora.VP8(google开源)      2.常见的音频格式     编码:AAC.MP3 ...

  6. css总结16:HTML5 多媒体音频(Audio)视频(video )

    1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...

  7. html5——多媒体（四）

    全屏兼容 box.requestFullscreen(); box.webkitRequestFullScreen(); box.mozRequestFullScreen(); <!DOCTYP ...

  8. html5——多媒体（三）

    自定义进度条 1.video标签是内联块,可以设置宽高,但是需要用大盒子将其包裹起来进行定位 2.小盒子设计成进度条样式,并进行定位 3.进度条样式中的特殊按钮可以用web字体 4.通过点击实现视频的 ...

  9. html5——多媒体（二）

    基本方法 load() //重新加载视频 play() //播放 pause() //暂停 基本属性 currentTime //视频播放的当前进度. duration //视频的总时间 paused ...

随机推荐

  1. tyvj1117 拯救ice-cream

      背景 天好热……Tina顶着那炎炎的烈日,向Ice-cream home走去……可是……停电了……冰淇淋们躺在Ice-cream home的冰柜里,慢慢地……慢慢地……融化…………你说,她能赶在冰 ...

  2. 使用pymongo.find查询很慢的解决方式

    1.前言: mongodb部署在阿里云服务器, mongodb中collection存储了百万条记录. 需求:优化查询指定时间段内的所有数据的查询时间,结果有百万级别. 最初:313587条记录耗时: ...

  3. ZFS

    zfs是128bit文件系统,那么为什么容量是2^64byte? 不应该是2^128 / 2^3=2^125 byte吗 文件系统不再局限于单独的物理设备,而且文件系统还允许物理设备把他们自带的那些文 ...

  4. Unity3D Asset文件导出3DMax 可编辑格式

    本文章由cartzhang编写,转载请注明出处. 全部权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/60878354 作者:car ...

  5. C++学习之多重继承与虚继承

    一.多重继承 我们知道,在单继承中,派生类的对象中包含了基类部分 和 派生类自定义部分.同样的,在多重继承(multiple inheritance)关系中,派生类的对象包含了每个基类的子对象和自定义 ...

  6. 20170410 --- Linux备课资料 --- 压缩与解压缩

    这节课我们来学习一下压缩与解压缩,那什么是压缩与解压缩呢? 联想一下Windows系统: 选中文件,右键选择即可 如果压缩,可以选择要压缩的格式,而解压缩直接选择就可以完成了 Linux是通过命令的方 ...

  7. HDU 5858Hard problem

    Hard problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  8. bzoj3662

    数学 其实我们发现不用每个数都去试一下,只要确定每个数字有几个就可以确定这个数.所以我们先搜索一下,然后检验. 但是这样太慢了,所以我们打表. 打出1-30的结果,然后取模. 打表的程序好像弄丢了.. ...

  9. error: undefined reference to 'property_set （转载）

    转自:http://blog.csdn.net/u011589606/article/details/23474241 in the cpp file, please include #include ...

  10. Knights of the Round Table(Tarjan+奇圈)

    http://poj.org/problem?id=2942 题意:n个武士,某些武士之间相互仇视,如果在一起容易发生争斗事件.所以他们只有满足一定的条件才能参加圆桌会议:(1)相互仇视的两个武士不能 ...