(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。

(20)HTML5-多媒体影音播放

之前曾经介绍过,在HTML5中可以通过标签在网页中播放影片,且不需要再安装额外的插件,此功能已经带给用户极大的便利。但基本的标签只提供了简单功能的播放器界面,如果想要改变播放器的外观和功能,只能结合标...
  • zsc2014030403015
  • zsc2014030403015
  • 2016年09月03日 14:01
  • 249

Android多媒体详解

1、     MediaPlayer播放音频 2、     SoundPool播放音频 3、     VideoView播放视频 4、     MediaPlayer和SurfaceView播放视频 ...
  • mxcsdn
  • mxcsdn
  • 2016年04月12日 20:51
  • 983

嵌入式系统多媒体框架分析

嵌入式系统多媒体框架分析 1 Android系统的多媒体框架 Google正式对外发布的Android版本,在Android2.3版本之前,使用的是Opencore多媒体框架,Android2.3...
  • Tiger99111
  • Tiger99111
  • 2014年08月07日 16:02
  • 1541

丰富你的程序,运用手机多媒体

在过去,手机的功能都比较单调,仅仅就是用来打电话和发短信的。而如今,手机在我们生活中正扮演着越来越重要的角色,各种娱乐方式都可以在手机上进行。上班的路上太无聊,可以带着耳机听音乐。外出旅行的时候,可以...
  • u013678930
  • u013678930
  • 2016年03月16日 17:02
  • 856

车载多媒体Android开发平台学习心得

Android平台工具学习 一、Android平台 Eclipse+ ADT+SDK 1.1、准备工作 进行开发前的安装配置: ①Java:先安装java,配置JDK环境变量; ②Eclipse:使...
  • Agg_bin
  • Agg_bin
  • 2017年10月25日 18:52
  • 185

在展厅设计中运用多媒体技术-数字沙盘

大型多媒体沙盘,又称多媒体投影沙盘。它融合了传统的物理沙盘,结合最新的多媒体影像技术、交互体验技术等的新型电子沙盘。数字沙盘当前主要分为两种:一是在原来传统的沙盘模型上增加多媒体投影机系统;二是纯三维...
  • sinat_33706642
  • sinat_33706642
  • 2016年01月11日 15:21
  • 618

Android---控制多媒体应用程序的音量和播放

本文译自:http://developer.android.com/training/managing-audio/volume-playback.html 良好的用户体验是具有可预见性的。如果你的...
  • FireOfStar
  • FireOfStar
  • 2013年06月03日 22:24
  • 3608

Android多媒体开发框架

一、Vitamio框架Vitamio 是一款 Android 与 iOS 平台上的全能多媒体开发框架,全面支持硬件解码与 GPU 渲染。Vitamio 凭借其简洁易用的 API 接口赢得了全球众多开发...
  • axi295309066
  • axi295309066
  • 2016年10月02日 16:06
  • 1974

多媒体的应用

主要学习一下多媒体的播放声音 和播放视频等的应用 首先先下载一段音乐 随后直接拖入到文件 进行拷贝 随后再sb中添加三个按钮 为play pause 和stop为三种状态 随后添加头文件  为3个按钮...
  • qq_31214097
  • qq_31214097
  • 2015年11月19日 17:20
  • 195

Windows多媒体定时器(精确到1ms) (二)

Windows多媒体定时器(精确到1ms)
  • HK_5788
  • HK_5788
  • 2017年04月15日 21:49
  • 548
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(3)HTML5-多媒体应用
举报原因:
原因补充:

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