(3)HTML5-多媒体应用

原创 2016年08月29日 15:02:11


<!doctype html>
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 </head>
 <body>
    <!-- 使用《audio》标签可以在浏览器中加入一个简易的音乐播放器,功能包括“播放”,“暂停”以及“音量调整” controls:加入controls属性,代表用户可以用音乐播放器的面板控制音频文件的播放 autoplay:加入autoplay属性,代表一加载网页就会立即自动播放音频文件 loop:加入loop属性,代表会反复播放音频文件-->
<audio src="funny.mp4" width="480" Height="360"  controls autoplay loop>
    简易音乐播放器
</audio>

<!-- 使用《video》标签可以在浏览器中加入一个简易的视频播放器,包括“播放”,“暂停”,“音量控制”,以及“全屏的功能” controls:允许用户通过播放控件控制视频播放 poster:预留字幕的位置 loop:反复播放视频 autoplay:加载后自动开始播放视频 height/width:指定播放器的高度与宽度(单位:像素)-->
<video src="funny.mp4" width="480" Height="360"  controls autoplay>
    简易的视频播放器
</video>
<!--由于现行的每一种浏览器都支持播放各种视频文件格式,可是,在使用src指令指定文件路径时只能一次只能一个位置,无法达到同时备存多个文件格式的目的。这时就可以用《source》标签,用来一次指派多种格式,但用户的浏览器加载页面时就会自动挑选合适的格式进行播放 -->
<video width="480" Height="360" >
    <source src="funny.mp4" type="video/mp4"/>
     <source src="funny.webm" type="video/webm"/>
      <source src="funny.ogg" type="video/ogg"/>
      <p>简易的视频播放器</p>
</video>

<!--在《video》标签内加入《track》,可以为影片加载WebVTT字幕文件,播放器也会增加“cc”的字幕选项供用户使用 
kind:定义文件类型 srclang:指定字幕文件的语言,在播放器中不会用到-->
<video width="480" Height="360" controls="controls">
    <source src="funny.mp4" type="video/mp4"/>
    <track kind="subtitles" src="funny_en.vtt" srclang="en" label="English">
</video>

<!-- 此标签可以使用外部的播放程序嵌入网页来播放音频,当所要播放的文件不被HTML5的《video》和《audeo》支持时,就可以用《embed》来开启 -->
<embed src="horse.swf">
 </body>
</html>


版权声明:本文为博主原创文章,转载必须声明出处,thank。

相关文章推荐

HTML5多媒体素材的应用

HTML5多媒体素材的应用 1、网页图片使用须知 选择图片考虑:图片格式(JPEG,GIF)、图片分辨率(72dpi)、图片大小( 2、影音特效(,) 音乐格式有WAV,MP3,OGG 表一 ...
  • cysear
  • cysear
  • 2015年07月20日 17:02
  • 350

HTML5多媒体素材应用

本文主要为HTML5多媒体素材的综合应用,关于网页图片,添加影音特效、Flash动画、级传统播放器的综合应用。...

HTML5+CSS3+jquery应用之美

  • 2017年11月15日 10:35
  • 72.94MB
  • 下载

HTML5+CSS3小应用

  • 2012年08月19日 23:06
  • 9KB
  • 下载

VisionMobile:2013年Q3移动开发者经济报告(十一):第十章、HTML5应用开发的万花筒

第十章、HTML5应用开发的万花筒 HTML5是与应用经济双寡头相竞争的技术。根据我们Q3对6000+名移动应用开发者的研究,就移动开发者青睐度而言,52%的开发者以某种形式使用HTML5,排在iOS...

9款赏心悦目的HTML5&amp;CSS3应用特效

  • 2014年03月08日 19:43
  • 1.45MB
  • 下载

7款精巧实用的HTML5/CSS3应用

今天要给大家带来7款很不错的HTML5/CSS3应用,它们相比之前的HTML5动画来说要实用得多,每一款应用都提供源码下载,一起来看看。 1、HTML5像素文字爆炸重组动画特效      ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(3)HTML5-多媒体应用
举报原因:
原因补充:

(最多只允许输入30个字)