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文件播放的更多相关文章

  1. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  2. 想做web前端project师应该学习些什么？

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  3. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  4. web前端开发控件学习笔记之jqgrid+ztree+echarts

    版权声明:本文为博主原创文章,转载请注明出处.   作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...

  5. 2022年Web前端开发流程和学习路线（详尽版）

    前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...

  6. web前端零基础入门学习！前端真不难！

    现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...

  7. 最适合2018年自学的web前端零基础系统学习视频＋资料

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

  8. 史上最全的web前端开发程序员学习清单！

    今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...

  9. WEB 前端模块化，读文笔记

    文章链接 WEB 前端模块化都有什么? 知识点 根据平台划分 浏览器 AMD.CMD 存在网络瓶颈,使用异步加载 非浏览器 CommonJS 直接操作 IO,同步加载 浏览器 AMD 依赖前置 req ...

随机推荐

  1. 密码学笔记(5)——Rabin密码体制和语义安全性

    一.Rabin密码体制 Rabin密码体制是RSA密码体制的一种,假定模数$n=pq$不能被分解,该类体制对于选择明文攻击是计算安全的.因此,Rabin密码体制提供了一个可证明安全的密码体制的例子:假 ...

  2. vue表格之:formatter=fun

    作用:对从数据库中取出的数据进行处理后展示. 示例1: partner1为从数据库中查询出的展示字段,值为数字id,需要转化成中文名称 partners为全量查询结果,包含了id与中文名称的一一对应关 ...

  3. quartz 定时任务配置文件信息

    quartz 定时任务配置文件有五大要素,配置好这五大要素,quartz 就能够正常的工作. 五大要素分别是: 1.工作的 bean:具体是哪个 Java 类来作为定时任务的文件入口,并配置该 bea ...

  4. linux支持大容量硬盘

    1.fdisk使用msdos格式分区,最大支持2T硬盘,要使用大于2T硬盘需使用parted命令使用GPT格式分区. 2.除修改分区格式外,linux内核需添加GPT分区格式支持,修改如下: CONF ...

  5. linux服务器之间传输文件

    转载:https://www.jb51.net/article/82608.htm 1. scp(最近就使用了scp) [优点]简单方便,安全可靠:支持限速参数 [缺点]不支持排除目录[用法]scp就 ...

  6. 如何将Map键值的下划线转为驼峰

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:如何将Map键值的下划线转为驼峰: 例,将HashMap实例extMap键值下划线转为驼峰: 代码: HashMap<String ...

  7. Python-流程控制 if判断

    目录 if 判断 语法 单分支结构 双分支结构 多分支结构 for循环 语法 for + break for + continue for + else range函数 for + if 练习 if ...

  8. Django项目：CRM(客户关系管理系统)--58--48PerfectCRM实现CRM客户报名流程学生合同

    # sales_urls.py # ————————47PerfectCRM实现CRM客户报名流程———————— from django.conf.urls import url from bpm. ...

  9. 省际联动distpicker插件的使用讲解

    1.在使用input页面加载script的引用 <script src="js/distpicker/distpicker.data.js"></script&g ...

  10. 为什么@RestController返回的Date类型是Long型

    最近项目中发现一个好玩的事情:本地调试时,返回的date是日期格式yyyy-MM-dd HH:mm:ss,但发布到服务器后就变为Long型的时间戳了 最后查到的原因很简单,因为发布服务器启动时的脚本加 ...