H5多媒体

Video

<video width="500px" controls="controls">
    <source src="test.ogg" type="video/ogg" />
    你的浏览器不支持video
</video>

控件是可以隐藏的,可以自定义控件

<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="500px">
    <source src="test.ogg" type="video/ogg" />
</video>

<script type="text/javascript">
var myVideo = document.getElementById("video1");

function playPause(){
    if (myVideo.paused){
        myVideo.play();
    }
    else{
        myVideo.pause();
    }
}

function makeBig(){
    myVideo.width = 600;
}
function makeNormal(){
    myVideo.width = 500;
}
function makeSmall(){
    myVideo.width = 400;
}
</script>

Audio

<audio controls="controls">
    <source src="song.mp3" type="audio/mepg" />
    <source src="song.ogg" type="audio/ogg" />
    Your browser does not support the audio tag.
</audio>

H5还提供了很多多媒体的API,运用这些API可以做出精美的视频播放器和音乐播放器,时间有限,等我以后再来更新。

时间: 2024-10-13 12:38:52

H5多媒体的相关文章

玩转HTML5+跨平台开发[6] H5多媒体标签

汇总 1. video标签 2. audio标签 3. summary标签和details标签-详情和概要标签 4. marquee标签-跑马灯效果 5. HTML中被废弃的标签 6. HTML实体 video标签 作用: 播放视频 格式1: <video src=""> </video> video标签的属性src: 用于告诉video标签需要播放的视频地址:autoplay: 用于告诉video标签是否需要自动播放视频:controls: 用于告诉video

常见块元素和内联元素

块元素 段落 div p列表 ul ol li dl dd dt表单 form fieldset legend optgroup option output标题 h1-h6骨架 html bodyh5容器 header footer nav aside section article h5多媒体 figure figcaptionh5功能性 summary details其他 hr pre bolckquote address 内联元素 表单 input(inline-block)button(

Bigbluebutton服务执行过程及相关配置文件

BigBlueButton服务列表 BigBlueButton由许多开源的服务组成,看似很麻烦,实际上拆分开每一个服务就很简单了,组件化平台化.究竟BBB都用到了哪些开源服务?我们来列举一下,名称均带有对应官网链接.1.Ubuntu乌班图操作系统,友好的用户交互界面:2.Flex SDK,高效构建Web应用程序,基于所有浏览器的开源框架,AS3编写客户端软件的SDK:3.Ghostscript文档转换:4.Grails开源Web框架:5.ActiveMQ(官网有介绍,但未发现使用位置):6.Im

BigBlueButton服务列表及日志配置

BBB由许多开源的服务组成,看似很麻烦,实际上拆分开每一个服务就很简单了,组件化平台化. 究竟BBB都用到了哪些开源服务? 我们来列举一下,名称均带有对应官网链接. 1.Ubuntu乌班图操作系统,友好的用户交互界面: 2.Flex SDK,高效构建Web应用程序,基于所有浏览器的开源框架,AS3编写客户端软件的SDK: 3.Ghostscript文档转换: 4.Grails开源Web框架: 5.ActiveMQ(官网有介绍,但未发现使用位置): 6.Image Magick,图像设计处理工具:

定义播放器

链接:https://pan.baidu.com/s/1gdjj6Vra_zKAieZHuUpIkg 密码:di0j 1.H5多媒体标签介绍 figure--多媒体语义标签 figcaption--多媒体区域表体 <video width="400" height="300" src="./chrome.mp4" controls loop autoplay></video> <!-- 浏览器支持多种视频格式文件播放

h5新增属性

H5新增标签 结构标签 (双) header 头面 页面头部 section的头部 footer 页脚 nav 导航 aside 侧边栏 main 规定文档的主体内容 section 定义文档中的小节 article 定义文章 论坛 报纸 用户评论 details 属性open summary dialog 对话框 属性 open 文本标签 mark 标记 time 时间 meter 度量 温度/电量/容量 属性 max/min/value/low/high/optimum progress 进

HTML 多媒体

1.多媒体简介 Web 上的多媒体指的是音效.音乐.视频和动画,多媒体有多种不同的格式,它可以是听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等.在互联网上,几乎在所有网站都能发现嵌入网页中的多媒体元素,现代浏览器已支持多种多媒体格式. 第一代浏览器只支持文本,而且即使是对文本的支持也仅限于单一字体和单一颜色,随后诞生了支持颜色.字体和文本样式的浏览器,还增加了对图片的支持.不同的浏览器以不同的方式处理对音效.动画和视频的支持,某些元素能够以内联的方式处理,而某些则需要额外的插

多媒体文件格式全解说(上)--音视频

视频: mp4/m4v/3gp/mpg.flv/f4v/swf.avi.gif.wmv.rmvb.mov.mts/m2t.webm/ogg/mkv MP4格式是最常见的一种视频文件格式,它现在所使用的视频编码并不是原来的MPEG4,而是H.264/AVC视频编码和AAC音频编码.它是一种商业的视频编码,国外是需要版权费用的,一般较常用的处理器都会有硬件编码解码H.264功能.但由于其商业版权,火狐和Opera的HTML5 <video>标签并不完全支持此格式.M4V是苹果公司创造的一种视频格式

认识H5!

1.H5是HTML的一个最新版本,也是web的一个标准,兼容IE9+及主流浏览器 2.H5增加了语义化标签.本地存储.智能表单.多媒体 3.CSS3增加了圆角.过渡.动画,提高了用户体验 4.增加了DOM的新API,使得DOM操作更加方便 5.增加了与硬件结合的功能,如定位.重力感应. 硬件访问等功能 6.通常说的H5指HTML5.CSS3.javascript,是一个组合开发平台