开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

HTML5——HTML5多媒体标签

简介: HTML5——HTML5多媒体标签
+关注继续查看

多媒体标签


  • embed:标签定义嵌入的内容


  • audio:播放音频


  • video:播放视频


多媒体 embed(会使用)


embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。


因为兼容性问题,我们这里只讲解 插入网络视频, 后面H5会讲解 audio 和video 视频多媒体。


<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>


优酷,土豆,爱奇艺,腾讯、乐视等等


  1. 先上传


  1. 在分享


多媒体 audio


HTML5通过标签来解决音频播放的问题。


使用相当简单,如下图所示


image


并且可以通过附加属性可以更友好控制音频的播放,如:


autoplay 自动播放


controls 是否显不默认播放控件


loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环


由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考


image


多浏览器支持的方案,如下图


标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择


image


多媒体 video


HTML5通过标签来解决音频播放的问题。


同音频播放一样,使用也相当简单,如下图


image


同样,通过附加属性可以更友好的控制视频的播放


autoplay 自动播放


controls 是否显示默认播放控件


loop 循环播放


width 设置播放窗口宽度


height 设置播放窗口的高度


由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考


image


多浏览器支持的方案,如下图****


image


案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <audio  controls loop>
        <source src="bgsound.mp3"/>
        <source src="music.ogg"/>
        您的浏览器版本太低
    </audio>

    <video autoplay  controls>

        <source  src="movie04.ogg"/>
        <source  src="mp4.mp4"/>
    </video>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
40款非常漂亮的 HTML5 & CSS3 免费网站模板【下篇】
  HTML5 作为下一代网页语言,加入中众多更具语义的标签,例如video、audio、section、article、header 和 footer 等。而 CSS3 作为 CSS 的下一代版本,同样引入了很多很酷的属性,以前很多需要 JavaScript 才能实现的复杂效果,现在使用 CSS3 就能非常简单的实现。
784 0
40款非常漂亮的免费 HTML5 & CSS3 网站模板【上篇】
  HTML5 作为下一代网页语言,加入中众多更具语义的标签,例如video、audio、section、article、header 和 nav 等。而 CSS3 作为 CSS 的下一代版本,同样引入了很多很酷的属性,以前很多需要 JavaScript 才能实现的复杂效果,现在使用 CSS3 就能非常简单的实现。
724 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载