1.音频播放
audio(音频)
html5提供了播放音频文件的标准
<audio src="anli.mp3" controls="controls">您的浏览器不支持</audio>
自定义控件
<button οnclick="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 οnclick="clickV()">播放/暂停</button>
<button οnclick="clickBig()">放大</button>
<button οnclick="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>

转载于:https://www.cnblogs.com/baixuemin/p/6495124.html

HTML5的音频播放和视频播放相关推荐

  1. html5 audio音频播放全解析

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

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

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

  3. html5 audio音频播放器

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

  4. html5 仿微信语音播放器,Material design风格HTML5 audio音频播放器

    jAudio.js是一款基于HTML5 audio的Material design风格音频播放器jQuery插件.该音频播放器可以设置音频播放列表,每首曲子的封面,标题等,还可以控制歌曲的播放和快进, ...

  5. 自定义制作音频播放器_使用HTML5制作音频播放器，第3部分：微数据和皮肤

    自定义制作音频播放器 In the first two articles of this series I introduced the concept and code of a customize ...

  6. 音乐封面转动html,带封面的HTML5手机音频播放器

    本文演示了三种不同样式的html5音频播放器,通过html5的audio标签,使其支持自定义歌名.歌手和歌词,是否自动播放,音乐封面图,播放进度等 查看演示 下载资源: 104 次 下载资源 下载积分 ...

  7. html audio播放本地语音文件,HTML5+ - audio音频播放及网络音频文件播放

    1.介绍常用方法 createPlayer()创建音频对象 play: 开始播放音频 pause: 暂停播放音频 resume: 恢复播放音频 stop: 停止播放音频 seekTo: 跳到指定位置播 ...

  8. 可视化大屏原型制作 h5_使用HTML5制作音频播放器，第2部分：原型制作

    可视化大屏原型制作 h5 There are two approaches to making almost anything. The first is to dive in head-first, ...

  9. 移动应用程序设计基础——安卓动画与视音频播放器的实现

    <移动应用程序设计基础>实验6 安卓动画与视音频播放器的实现 实验名称: 实验6 安卓动画与视音频播放器的实现 所使用的工具软件及环境: JDK1.8,Android Studio 一.实 ...

最新文章

  1. A/B测试：概念 ≠ 执行
  2. centos7 系统缓存清理
  3. 深度学习图像超分辨率最新综述：从模型到应用
  4. c语言较大的整型相加,二个超长正整数的相加
  5. 屏蔽×××S 2008报表导出格式
  6. 二分查找向上还是向下取整_113、股市中的跳空缺口判断技巧是向上还是向下
  7. Flink on K8s 在京东的持续优化实践
  8. python中的super用法详解_python中super的用法实例解析
  9. 工业机器人大赛技术培训方案
  10. java 爬取微信公众号文章 - 搜狗微信搜索
  11. HenCoder自定义View学习 - 自定义绘制学习笔记
  12. cnn风格迁移_图像风格迁移详解
  13. java发送请求_Java模拟HTTP的Get和Post请求(增强)
  14. 对一段Oracle GoldenGate （OGG） 传输进程日志（.rpt文件）的解释
  15. shibor与沪深300指数的相关性图示
  16. 2022年全球市场三维测量产品总体规模、主要生产商、主要地区、产品和应用细分研究报告
  17. 零钱兑换问题——python动态规划解法
  18. python爬虫，矢量数据地铁线路获取
  19. 针对或者利用计算机网络实施,网络安全合规指引题库：针对或者利用计算机网络实施的犯罪，哪些公安机关不可以管辖？（）...
  20. 【例题 8-12 UVA-12627】Erratic Expansion

热门文章

  1. extracting lines bases a list using awk
  2. 字节跳动2019春招笔试——找零（JavaScript）
  3. JavaScript学习（三十八）—面向过程与面向对象
  4. HTML+CSS+JS实现计算机功能
  5. python echarts接口_Python之图表Pyecharts
  6. fat32硬盘格式能在苹果系统里读写操作吗?
  7. 花呗借呗还不上会打通讯录电话号码吗？
  8. 每天坚持跑步到底会不会瘦呢？
  9. 一颗明亮的火球从天空划过
  10. 一个人能否成为大老板，赚大钱发大财