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. C++手稿:std::string

    字符串在非常多编程语言中已经成为基本数据类型,C语言中我们使用char*来手动申请和维护字符串, 在C++中,能够使用std::string来方便地创建和操作字符串. string是一个模板类.它有b ...

  2. 海思HI3516A开发板顺利上线

    有图有真相.

  3. 6 JobApp默认视图开发

    第一步:引入angularjs 添加app模块 现在我们正式进入开发,下面是我们在上一节建立的目录结构: 我们需要再src路径下,新建index.html文件,先引入angularjs文件: < ...

  4. add environment path to powershell

    https://4sysops.com/archives/use-powershell-to-execute-an-exe/ https://stackoverflow.com/questions/7 ...

  5. maven目录结构介绍篇

    bin  该目录包含了mvn运行的脚本,这些脚本用来配置java命令,准备好classpath喝相关的java系统属性 mvn是基于UNIX平台shell脚本,mvn.bat是基于Windows平台的 ...

  6. Linux下安装Openfire 4.2.1

    1.下载安装包,下载地址:http://www.igniterealtime.org/downloads/index.jsp#openfire 2.将下载的安装包复制到linux服务器的/opt目录下 ...

  7. DP专题之概率DP

    注意:在概率DP中求期望要逆着推,求概率要正着推 概率DP求期望: 链接: http://acm.hdu.edu.cn/showproblem.php?pid=4405 dp[ i ]表示从i点走到n ...

  8. WebBrowse使用

     C# WinForm开发系列 - WebBrowser 2009-12-14 14:19:21 标签:C# - WebBrowser 休闲 WinForm开发系列 介绍Vs 2005中带的WebBr ...

  9. vs 中switch语句快捷键列出枚举

    先switch然后两下tab会补完到default,光标显示在switch后的变量这时输入枚举,输完后回车,自动补完所有枚举的case

  10. java笔记之线程简述1

    1:线程是依赖于进程而存在. 2:什么是进程?  通过任务管理器我们就看到了进程的存在.  而通过观察,我们发现只有运行的程序才会出现进程.  进程:就是正在运行的程序.  进程是系统进行资源分配和调 ...