1.音频播放
audio(音频)
html5提供了播放音频文件的标准
 
<audio src="anli.mp3" controls="controls">您的浏览器不支持</audio>
自定义控件
 
<button onclick="clickA()">播放/暂停</button>
<audio src="anli.mp3" id="audio">您的浏览器不支持</audio>
<script>
    var a=document.getElementById("audio");
    function clickA(){
        if(a.paused){
            a.play();
        }else{
            a.pause();
        }
    }
</script>
cotrol(控制器)
control属性提供添加播放、暂停和音量控件
标签
<audio>     定义声音
<source>     规定多媒体资源,可以是多个
2.编解码工具
针对不同浏览器支持的多媒体播放格式,我们需要编解码工具对多媒体格式进行转换。
FFmpeg(一款免费开源的编解码工具)
网址:www.ffmpeg.org
 
3.视频播放
video(视频)  :  HTML5提供了展示视频的标准
control(控制器)  :  control 属性提供添加播放、暂停和音量控件
标签 :  <video> 定义声音    <source> 规定多媒体资源,可以是多个
属性 : width : 宽    height : 高
 
<video src="anli.mp4" controls="controls">您的浏览器不支持</video>
火狐浏览器不支持mp4格式,支持ogg格式
<video controls="controls">
     <source src="anli.mp4">
     <source src="anli.ogg">
     您的浏览器不支持
</video>
 
自定义
 
<button onclick="clickV()">播放/暂停</button>
<button onclick="clickBig()">放大</button>
<button onclick="clickSmall()">缩小</button>
<br/>
<video id="video" width="500" height="400">
     <source src="anli.mp4">
     <source src="anli.ogg">
     您的浏览器不支持
</video>
<script>
     var v=document.getElementById("video");
     function clickV(){
          if(v.paused){
               v.play();
          }else{
               v.pause();
          }
     }
     function clickBig(){
          v.width = 800;
          v.height = 800;
     }
     function clickSmall(){
          v.width = 300;
          v.height = 300;
     }
</script>

HTML5的音频播放和视频播放的更多相关文章

  1. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  2. 与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成

    原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...

  3. HTML5实现音频播放

    Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 aud ...

  4. 用html5实现音频播放器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. css总结16:HTML5 多媒体音频(Audio)视频(video )

    1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...

  6. 二、深度解析HTML5之视频播放和音频播放

    一:视频播放 传统的视频音频播放是通过flash插件的形式完成,不是所有的浏览器都安装了flash插件,而且手机端不支持flash,这就导致视频和音频的播放会有很大的麻烦. 于是,HTML5增加音频和 ...

  7. iOS开发系列--音频播放、录音、视频播放、拍照、视频录制

    --iOS多媒体 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制, ...

  8. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  9. iOS开发----音频播放、录音、视频播放、拍照、视频录制

    随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制,还是对麦克风.摄像头的操 ...

随机推荐

  1. thinkphp3.2.3 数据库写入add 方法的一些问题。

    最近在做项目中遇到的一个数据操作add()方法,在不开启debug的模式下会漏掉一些字段没写入数据库. 当时并不知道是这个原因,明明在开发的时候都是没问题的,怎么突然出现这个问题,找了好久都没有头绪, ...

  2. Android 通过ADB Wireless无线调试应用

    使用数据线调试应用难免不方便,本篇博客介绍使用ADB Wireless工具.当手机和电脑处在同一网络下.实现无线调试应用. ADB Wireless可以让手机用无线来代替USB连接.而使用ADB工具的 ...

  3. OpenGL中视点模型坐标的理解

    个人的理解: gluLookAt中的eye.center和up的坐标原点是ModelView中的坐标原点,右手坐标系,Z轴正向指向显示器外侧 glOrtho中的near和far参数距离相对eye而言, ...

  4. sublime text 3 乱码

    sublime text 是一款很好用的文字编辑软件,可谓是程序员必备,但是最近发现在mac端使用的时候,中文乱码, 网上一些解决方案,抄袭严重,没有解决实际问题,所以记录下自己解决问题的过程. 1. ...

  5. Unity即将到来的2D工具

    孙广东  2015.7.5 看了一下对功能介绍的视频,确实功能强大. 可是须要FQ在youtube上观看,所以就下载下来了.能够浏览一下: http://www.iqiyi.com/playlist2 ...

  6. C#生成Excel文件后彻底解除占用代码(来着CSDN)

    http://bbs.csdn.net/topics/280078428 jy251 LS说KILL进程的朋友们···我说...你们真行!!!如果用户是administrator还行,如果不是怎么办? ...

  7. USACO35 翻转奶牛(尺取法)

    通过这道题了解了不少有关翻转的知识呢...... 首先,我们枚举翻转的区间长度k,假设i有个按钮,按下就可以让i~i+k-1翻转,那就有两个状态,按i或不按i(因为按两次相当于没按),那就往后扫一遍, ...

  8. YTU 2894: G--我要去内蒙古大草原

    2894: G--我要去内蒙古大草原 时间限制: 1 Sec  内存限制: 128 MB 提交: 162  解决: 8 题目描述 春天到了,小明想要从烟台开车去内蒙古大草原放松一下,这两地的距离是14 ...

  9. Lucene 4.X 倒排索引原理与实现: (3) Term Dictionary和Index文件 (FST详细解析)——直接看例子就明白了!!!

    转自: http://www.cnblogs.com/forfuture1978/p/3945755.html 好好看看吧 倒排列表信息中词典相关存储的最关键格式 占倒排列表中文件大小的多数 我们来看 ...

  10. mysql error:You can't specify target table for update in FROM clause

    mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...