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. OpenCV图像处理篇之图像平滑

    图像平滑算法 图像平滑与图像模糊是同一概念,主要用于图像的去噪.平滑要使用滤波器.为不改变图像的相位信息,一般使用线性滤波器,其统一形式例如以下: %20\Large%20g(i,j)=\sum_{k ...

  2. [CSAPP]Bufbomb实验报告

    Bufbomb实验报告 实验分析: level 0-3从test開始制运行,通过函数getbuf向外界读取一串内容(buf). Level 4 是通过參数-n,程序运行testn函数,调用getbuf ...

  3. C# MVC 枚举转 SelectListItem

    <span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif; background-color: r ...

  4. go---weichart个人对Golang中并发理解

    个人觉得goroutine是Go并行设计的核心,goroutine是协程,但比线程占用更少.golang对并发的处理采用了协程的技术.golang的goroutine就是协程的实现. 十几个gorou ...

  5. 一些linux嵌入式资源下载地址

    linux内核源代码情景分析 非扫描版 上下册合订版 字清楚 带书签 1575页 pdfhttp://download.csdn.net/source/2002579***************** ...

  6. ACTION中获得数据的几种方式

    1.第一种是通过公司封装的方法. 2.第二种:是通过IF方法判断 3.第三种是通过:set/get获得

  7. Java String 和 new String()的区别

    Java String 和 new String()的区别 本文转自:http://www.cnblogs.com/heima-jieqi/archive/2012/04/10/2440086.htm ...

  8. Mac 下设置Android 环境变量 NDK

    1. 启动终端Terminal 2. 进入当前用户的home目录 输入cd ~ 3. 创建.bash_profile    输入touch .bash_profile4. 编辑.bash_profil ...

  9. Python基础第八天

    一.内容

  10. Git 仓库结构 (二)***

    一.GIT工作流程 了解git,首先要弄清楚对象在被git管理过程中所处的4个阶段,分别是: 工作目录 index(又称为暂存区) 本地仓库 远程仓库. 从时间先后来讲,工作目录的内容是你当前看到的, ...