web前端学习（二）html学习笔记部分（4）--audio和video文件播放
1.2.10 html5音频
1.2.10.1 HTML5音频播放
本课主要讲解HTML5播放音频
<!--<button onclick="clickA">播放/暂停</button>--> <!--系统默认控制器-->
<audio controls="controls">
<source src="file://D:/webProjects/music.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<!--谷歌浏览器的音乐播放器不能拖进度条，很奇怪。
网上有回答是只有本地视频才会出现这种情况。。。很烦。
火狐浏览器的audio元素可以正常使用。-->
<br/>
<audio src="music/music.mp3" controls="controls"></audio>
参考资料：https://segmentfault.com/q/1010000011597379
自定义播放器控制器件
<body>
<button onclick="clickA()">播放/暂停</button>
<audio id="audio" src="music/test.mp3">您的浏览器不支持</audio>
<script>
var a = document.getElementById("audio");
function clickA(){
if(a.paused){
a.play();
}else{
a.pause();
}
}
</script>
1.2.10.2 HTML5音频视频-编解码工具
本课主要讲解编解码工具的使用
ffmpeg转码工具，命令等在此不做记录了。可以再看一遍视频或者自己搜索ffmpeg的使用教程
1.2.10.3 HTML5音频视频-视频播放
本课主要讲解HTML5的视频播放
<!--<video src="video/video.mp4" controls="controls"></video>-->
<!--<video id="video" controls>-->
<!--使用controls是使用浏览器默认的控制器件-->
<button onclick="clickV()">播放/暂停</button><br/>
<button onclick="clickBig()">放大</button><br/>
<button onclick="clickSmall()">缩小</button><br/>
<video id="video" height="200px" height="200px" >
<source src="video/video.mp4">
<source src="video/video.ogg">
<!--准备两种类型的视频，就会播放只有一个的视频，
有一个播放就可以了-->
您的浏览器不支持！
</video>
<script>
var v = document.getElementById("video");
function clickV(){
if(v.paused){
v.play();
}else{
v.pause();
// paused是个状态，pause()是个函数暂停；
}
}
function clickBig() {
v.width = "400";
// v.width = 400;
//在js中400和"400px"="400"是不同的，后两种才是px单位的，
// 前一种我目前不知道是什么单位
v.height = "400";
}
function clickSmall(){
v.width = "200";
v.height = "200";
}
</script>
web前端学习（二）html学习笔记部分（4）--audio和video文件播放的更多相关文章
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- web前端开发控件学习笔记之jqgrid+ztree+echarts
版权声明:本文为博主原创文章,转载请注明出处. 作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...
- 2022年Web前端开发流程和学习路线（详尽版）
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- 最适合2018年自学的web前端零基础系统学习视频＋资料
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
- 史上最全的web前端开发程序员学习清单！
今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...
- WEB 前端模块化，读文笔记
文章链接 WEB 前端模块化都有什么? 知识点 根据平台划分 浏览器 AMD.CMD 存在网络瓶颈,使用异步加载 非浏览器 CommonJS 直接操作 IO,同步加载 浏览器 AMD 依赖前置 req ...
随机推荐
- 关于MQ 消息队列的通俗理解和 rabbitMQ 使用
消息队列,一听很高大上,现在很多分布式系统都在用这个消息中间件 网上一搜, 说的都是些原理. 说下我的通俗理解, 你网上买了, 快递员给你投递, 会出现什么问题呢? 1 你不定时在家, 快递员 来了 ...
- python实现批量修改服务器密码
需求:机房.线上有多台主机,为了保障安全,需要定期修改密码.若手动修改,费时费力易出错. 程序应该满足如下需求 : 1.在现有的excel密码表格,在最后一个字段后面生成新的密码,另存为一个新的exc ...
- C#窗体随意移动
//全区域移动 const int WM_NCLBUTTONDOWN = 0xA1; const int HT_CAPTION = 0x2; [DllImport("user32.dll&q ...
- selenium 三种断言以及异常类型
selenium 提供了三种模式的断言:assert .verify.waitfor Assert 失败时,该测试将终止. Verify 失败时,该测试将继续执行,并将错误记入日显示屏 .也就是说允许 ...
- 05-4-style的代替操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 分布式配置中心(Spring Cloud Config)
真有意思的一个问题,我先把我遇到的写一次 ,今天学习Spring Cloud Config 新建了三个module ,eureka-server,config-server,config-clien ...
- PAT甲级——A1055 The World's Richest
Forbes magazine publishes every year its list of billionaires based on the annual ranking of the wor ...
- 013- unittest单元测试框架
unittest单元测试框架 重要的概念 1. TestCase TestCase 是最小的测试单元,用于检查特定输入集合的特定返回值.unittest提供了TestCase基类,我们创建的测试类需要 ...
- eclipse设置提示信息
1.设置 java 文件的代码提示功能 .abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ () 2.设置 xml 文件的代码提示功能 打 开 ...
- Docker（一）简介及核心概念
1.简介 Docker是一个开源的应用容器引擎:是一个轻量级容器技术: Docker支持将软件编译成一个镜像:然后在镜像中各种软件做好配置,将镜像发布出去,其他使用者可以直接使用这个镜像: 运行中的这 ...