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. 如何学习AxureRP Axure学习方法

    从作者最初接触的5.5版本,到5.6版本,到后来6.0的多个迭代版本,直到现在的6.5版本,AxureRP每次的版本升级都伴随着新功能的增 加,也解决了原型设计上的一些难题.这也从另一个方面诠释了“学 ...

  2. collections中namedtuple的用法

    我们知道tuple可以表示不变集合,例如,一个点的二维坐标就可以表示成: p = (1, 2) 但是,看到(1, 2),很难看出这个tuple是用来表示一个坐标的.这时,namedtuple就派上了用 ...

  3. 06-6-es6模板字符串

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. C++面向对象高级编程（下）第二周-Geekband

    17,对象模型:关于vptr(vitrual Pointer)和vtbl(virtual Table) 当存在虚函数就会出现虚指针vptr指向虚函数所在位置vtbl 将vptr实现vtbl内容翻译为C ...

  5. Django项目：CRM(客户关系管理系统)--77--67PerfectCRM实现CRM课程出勤排名

    # classtop_urls.py # ————————64PerfectCRM实现CRM课程排名详情———————— from django.conf.urls import url from b ...

  6. LUOGU P2296 寻找道路 （noip 2014）

    传送门 解题思路 首先建一张反图,从终点dfs出哪个点直接或间接相连,然后直接跑最短路,跑的时候判断一下所连的点是否与终点相连. 代码 #include<iostream> #includ ...

  7. JEECMS自定义标签开发步骤2

    JEECMS自带的只有[@cms_advertising]标签,并且官方没有给文档,用法: [@cms_advertising id='3']             <img src=&quo ...

  8. 原 jeecms9自定义标签以及使用新创建的数据库表

    转载地址:https://blog.csdn.net/nice_meng/article/details/89179089 本系统使用的是jeecmsv9版本,收集网上知识后,进行个人汇总 首先,自己 ...

  9. PAT甲级——A1036 Boys vs Girls

    This time you are asked to tell the difference between the lowest grade of all the male students and ...

  10. MR过程解析（转自about云）

     图中1:表示待处理数据,比如日志,比如单词计数图中2:表示map阶段,对他们split,然后送到不同分区图中3:表示reduce阶段,对这些数据整合处理.图中4:表示二次mapreduce,这个是m ...