<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. [USACO09JAN]全流Total Flow

    题目描述 Farmer John always wants his cows to have enough water and thus has made a map of the N (1 < ...

  2. 理解 LARGE_INTEGER的定义

    http://bbs.csdn.net/topics/310239341 #if defined(MIDL_PASS) typedef struct _LARGE_INTEGER { #else // ...

  3. WINDOWS下调用GetTokenInformation的奇怪之处--两次调用

    就是用getLastErr可以得到错误号,同时,会将需要的长度写到参数里,再进行第二次调用,以此来节约内存空间. 神奇的长见识了. 相关说法如下: ====================== The ...

  4. 非常适合新手的jq/zepto源码分析06 -- 事件模型

    复习下事件的有关内容: 1.现在用的绑定/删除: obj.addEventListener(type,fn,false) obj.removeEventListener(type) obj.attac ...

  5. Android 学习历程摘要（三）

    1.proguard混淆:对与Activity等不应进行混淆.否则系统将找不到生命周期函数:JSON字符串要考虑混淆之后是否会影响字段名:native方法也不混淆,否则调用不到 2.ListView的 ...

  6. bootstrap-table方法之：expandRow-collapseRow，展开或关闭当前行数据

    官方演示地址:http://issues.wenzhixin.net.cn/bootstrap-table/methods/expandRow-collapseRow.html <!DOCTYP ...

  7. HDU 5858Hard problem

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

  8. Git:代码冲突常见解决方法【转】

    本文转载自:http://blog.csdn.net/iefreer/article/details/7679631 如果系统中有一些配置文件在服务器上做了配置修改,然后后续开发又新添加一些配置项的时 ...

  9. bzoj1951 [Sdoi2010]古代猪文 ——数论综合

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1951 题意就是要求 G^( ∑(k|n) C(n,k) ) % p,用费马小定理处理指数,卢 ...

  10. 【TODO】Ruby Range类

    创建: 2017/10/28   Range类                                                                             ...