音频/视频

基础用法

属性

事件

audio元素和video元素

<audio id="audio" src="./成都.mp3"></audio>

<video id="video" src="./成都.mp4"></video>

一些属性

1、autoplay 自动播放

<audio src="成都.mp3" autoplay></audio>

2、controls 设置控件

<audio src="成都.mp3" autoplay controls></audio>

3、preload(none/metadata/auto) 预加载，规定是否在页面加载后载入视频   （与autoplay不能同时存在）

none 不需要加载数据

metadata 元数据 诸如时长、比特率、帧大小这样的原数据，而不是媒体内容需要加载的

auto 浏览器应当加载它认为适量的媒体内容

<audio src="成都.mp3" autoplay controls preload="auto"></audio>

4、loop 是否循环播放音/视频

<audio src="成都.mp3" autoplay controls loop preload="auto"></audio>

5、poster (video 独有)

当视频不可用时，使用一张图片替代，否则是空白 <video src="成都.mp4" poster="封面.jpg" controls></video>

多类型资源

<audio id="music">

<source src="成都.mp3" type="audio/mpeg">

<source src="成都.ogg" type='audio/ogg"'>

</audio>

（有时候不识别，为了保险起见，可以用哪个就拿哪个）

脚本化

var audio = document.getElementById('audio');

var audio = new Audio('./laojie.mp3');

var audio = document.createElement('video');

    <script>

        var audio = document.createElement('audio');

        audio.setAttribute('controls','controls'); //增加属性
        audio.setAttribute('autoplat','autoplay');
        audio.loop = "loop";

        audio.src = ""; //资源路径

        document.body.appendChild(audio);

    </script>

设置属性

controls/loop/preload/autoplay属性

audio.controls = true;

audio.loop = 'loop';

audio.preload = 'auto';

audio.autoplay = true;

currentSrc 资源链接，媒体数据的url地址

注意：window.onload

方法

1、play() 方法

2、pause() 方法

3、load()方法

重新加载视频/音频元素，用于在更改来源或其他设置后对音频/视频元素进行更新

音量 volume属性

表示播放音量，介于0(静音)~1(最大音量)之间，默认1。

将muted属性设置为true则会进入静音模式，设置为false则会恢复之前指定的音量继续播放。

超过范围会报错[0, 1]

<body>

    <audio src="" controls></audio>

    <button id="volum_add">+</button>

    <button id="volum_sub">-</button>

    <button id="play">播放</button>

    <button id="pause">暂停</button>

    <button id="reload">重播</button>

    <script>

        var audio = document.getElementsByTagName('audio')[0];

        volum_add.onclick = function(){

         if(audio.volume <=0.7){

            audio.volume += 0.3;

         }else{

             audio.volume = 1;

         }

        }

        volum_sub.onclick = function(){

           if(audio.volume >=0.3){

              audio.volume -= 0.3;

           }else{

              audio.volume = 0;

           }

        }

        play.onclick = function(){

            audio.play();

        }

        pause.onclick = function(){

           audio.pause();

        }

        reload.onclick = function(){

           audio.load();

           audio.play();

        }

    </script>

播放速率 playbackRate

用于指定媒体播放的速度。该属性值为1.0表示正常速度，大于1则表示”快进”，0~1之间表示”慢放"，负值表示回放。

每个浏览器实现的会有差别，具体看浏览器实现

    <button id="add_rate">快进</button>

    <button id="sub_rate">慢放</button>
        add_rate.onclick = function(e){

           if(audio.playbackRate < 2){

              audio.playbackRate += 0.1;

           }

        }

        sub_rate.onclick = function(e){

           if(audio.playbackRate > 0.5){

              audio.playbackRate -= 0.1;

           }

        }

currentTime/duration属性

currentTime 设置或返回音频/视频播放的当前位置

duration 返回当前音频/视频的时长(window.onload)

单位 秒

played/buffered/seekable

played属性返回已经播放(看过)的时间段，buffered属性返回当前已经缓冲的时间段，seekable属性则返回用户可以跳转的时间段。这三个属性都是TimeRanges对象，每个对象都有一个length属性以及start()和end()方法，length属性表示当前的一个时间段，start()与end()分别返回当前时间段的起始时间点和结束时间点(单位是秒，起始参数是0)

下面代码确定当前缓存内容的百分比：

paused/seeking/ended   （都返回布尔值）

这三个属性用来查询媒体播放状态，paused为true表示播放器暂停。seeking为true表示播放器正在调到一个新的播放点，如果播放器播放完媒体并且停下来，则ended属性为true。

作为了解

        play.onclick = function(){

           if(audio.paused){

              audio.play();

              play.innerText = '暂停'

           }else{

              audio.pause();

              play.innerText = '播放'

           }

        }    //播放、暂停一体

canPlayType()方法    （看浏览器是否支持播放当前文件）

h5-audio/video标签的更多相关文章

  1. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  2. [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...

  3. h5的video标签

    在video标签中,我们可以使用属性:videoWidth & videoHeight,它获取的是video的宽度和高度(媒体本身). 虽然不能直接使用,但是可以通过计算宽高比得到 video ...

  4. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  5. IPhone微信H5用Video标签播放不了视频

    H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)

  6. 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码  <au ...

  7. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  8. H5 <audio> 音频标签自定义样式修改以及添加播放控制事件

    H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...

  9. 解决h5的video标签，android、ipad客户端播放正常，iphone客户端无法播放

    在做html5时插入一个视频播放标签video后,测试时android.ipad客户端播放正常,唯独iphone自带浏览器无法播放. 解决办法: 判断用户所使用客户端访问h5页面时是iphone时,点 ...

  10. 更改kindeditor编辑器，改用支持h5的video标签替换原有embed标签

    kindeditor是一款不错的可视化编辑器,不过最近几年似乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系统中的em ...

随机推荐

  1. indexOf()定义和用法

    indexOf()定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法 stringObject.indexOf(searchvalue,fromindex) ...

  2. GAN 教程记录

    目标:使G产生的分布sample出来接近D的分布 1.G产生的data是否是database中的图片 a.计算L1 L2相似度 2.GAN与其他生成器相比较,能够生成较为清晰的图片 3.一次itera ...

  3. PythonStudy——Python中的None与 NULL(即空字符)的区别

    None与 NULL(即空字符)的区别  (1)是不同的一种数据类型 >>>type(None) <class 'NoneType'> >>>type( ...

  4. 使用mysqlproxy实现mysql读写分离

    先说一下什么是读写分离吧. 以三台虚拟机为例,搭建一主一从一代理,全部配置好之后,当从proxy插入数据时,该数据会同时插入主数据库,因为主从关系,从数据库也会有数据.当把从数据库执行slave st ...

  5. MySQL 命令（导出数据）：mysqldump

    官方网址:https://dev.mysql.com/doc/refman/8.0/en/mysqldump.html

  6. Window离线环境下如何安装pyhanlp

    Hanlp在离线环境下的安装我是没有尝试过的,分享SunJW_2017的这篇文章就是关于如何在离线环境下安装hanlp的.我们可以一起来学习一下! HanLP是一款优秀的中文自然语言处理工具,可以实现 ...

  7. verilog 代码分析与仿真

    verilog 代码分析与仿真 注意:使用vivado 自带的仿真工具, reg和wire等信号需要赋予初始值 边沿检测 module signal_test( input wire cmos_pcl ...

  8. ant design + react，自动获取上传音频的时长（react-audio-player）

    在后台管理项目中,用户要求上传音频,并且自动获取音频时长. 第一步, import { Upload, Button, Icon } from 'antd'; 第二步,在表单中使用 Upload 组件 ...

  9. threading模块小结

    这篇文章是别人文章的一个观后小结,不是什么原创. 首先第一个例子: import threading import time def worker():     print "worker& ...

  10. 黄聪：分享几个免费IP地址查询接口(API)

    淘宝IP地址库 提供的服务包括:1. 根据用户提供的IP地址,快速查询出该IP地址所在的地理信息和地理相关的信息,包括国家.省.市和运营商.2. 用户可以根据自己所在的位置和使用的IP地址更新我们的服 ...