随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签。

audio 标签属性

<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲 您的浏览器不支持html5的audio标签</audio>

当然audio元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:

再如下面:

<audio controls="controls">  <source src="music.ogg" /> <source src="music.mp3" /> <source src="music.wav" />
</audio> 

video标签属性

下面先介绍下video标签的一般用法

video标签的属性如下:

注:control 属性供添加播放、暂停和音量控件。

一般用法:

<div class="videoCon"><video width="750" height="300" id="videoP" src="video.mp4"></video>
</div>

当然可以暂停,播放该视频,使用方法如下:

function playPause() {var myVideo = document.getElementById('videoP');if (myVideo.paused){myVideo.play();}else{myVideo.pause();}   }

当然video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

如下:

<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.
</video>

获取HTMLVideoElement和HTMLAudioElement对象

//audio可以直接通过new创建对象
Media = new Audio("http://www.abc.com/test.mp3");
//audio和video都可以通过标签获取对象
Media = document.getElementById("media");

Media方法和属性

//错误状态
Media.error;            //null:正常
Media.error.code;       //1.用户终止 2.网络错误 3.解码错误 4.URL无效//网络状态
Media.currentSrc;           //返回当前资源的URL
Media.src = value;          //返回或设置当前资源的URL
Media.canPlayType(type);    //是否能播放某种格式的资源
Media.networkState;         //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源
Media.load();               //重新加载src指定的资源
Media.buffered;             //返回已缓冲区域,TimeRanges
Media.preload;              //none:不预载 metadata:预载资源信息 auto://准备状态
Media.readyState;       //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking;          //是否正在seeking//回放状态
Media.currentTime = value;          //当前播放的位置,赋值可改变位置
Media.startTime;                    //一般为0,如果为流媒体或者不从0开始的资源,则不为0
Media.duration;                     //当前资源长度 流返回无限
Media.paused;                       //是否暂停
Media.defaultPlaybackRate = value;  //默认的回放速度,可以设置
Media.playbackRate = value;         //当前播放速度,设置后马上改变
Media.played;                       //返回已经播放的区域,TimeRanges,关于此对象见下文
Media.seekable;                     //返回可以seek的区域 TimeRanges
Media.ended;                        //是否结束
Media.autoPlay;                     //是否自动播放
Media.loop;                         //是否循环播放
Media.play();                       //播放
Media.pause();                      //暂停//控制
Media.controls;         //是否有默认控制条
Media.volume = value;   //音量
Media.muted = value;    //静音//TimeRanges(区域)对象
TimeRanges.length;              //区域段数
TimeRanges.start(index)         //第index段区域的开始位置
TimeRanges.end(index)           //第index段区域的结束位置

事件

eventTester = function(e){Media.addEventListener(e,function(){console.log((new Date()).getTime(),e);});
}
eventTester("loadstart");       //客户端开始请求数据
eventTester("progress");        //客户端正在请求数据
eventTester("suspend");         //延迟下载
eventTester("abort");           //客户端主动终止下载(不是因为错误引起),
eventTester("error");           //请求数据时遇到错误
eventTester("stalled");         //网速失速
eventTester("play");            //play()和autoplay开始播放时触发
eventTester("pause");           //pause()触发
eventTester("loadedmetadata");  //成功获取资源长度
eventTester("loadeddata");      //提示当前帧的数据是可用的
eventTester("waiting");         //等待数据,并非错误
eventTester("playing");         //开始回放
eventTester("canplay");         //可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough");  //可以播放,歌曲全部加载完毕
eventTester("seeking");         //寻找中
eventTester("seeked");          //寻找完毕
eventTester("timeupdate");      //播放时间改变
eventTester("ended");           //播放结束
eventTester("ratechange");      //播放速率改变
eventTester("durationchange");  //资源长度改变
eventTester("volumechange");    //音量改变

转载于:https://www.cnblogs.com/moqiutao/p/4834552.html

HTML5 audio与video标签实现视频播放,音频播放相关推荐

  1. html audio 路径,HTML中的audio和video标签讲解

    关于标签讲解:点击这里 这里来一段简单的html5的音频代码: 您的浏览器不支持 audio 标签. 在audio标签中加入的文字,可以让浏览器在不支持audio标签的时候显示出提示文字. Inter ...

  2. ie8 html 语音标签,让IE8支持html5中的video标签

    这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在 里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. ②又要无休止的找ie8的解决方法,自 ...

  3. audio与video标签支持的文件格式

    audio与video标签支持的文件格式 1.audio标签支持的文件格式 (1)ogg:一种新的音频压缩格式,是完全免费.开放和没有专利限制的 (2)mp3:是一种音频压缩技术.它被设计用来大幅度地 ...

  4. HTML5新增的video标签,HTML5中video标签的使用方法

    HTML5中video标签的使用方法 发布时间:2020-08-27 11:33:56 来源:亿速云 阅读:100 作者:小新 这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...

  5. HLS播放:html5下用video标签来播放m3u8格式的视频

    HLS播放:html5下用video标签来播放m3u8格式的视频 <video class="tvhou" width="100%" height=&qu ...

  6. Vue如何使用video标签实现视频播放

    Vue如何使用video标签实现视频播放 具体内容如下 **项目需求:**动态显示视频滚动条.禁止视频下载.播放时每5s更新当前时长.每10分钟暂停视频显示提示. 之前做视频播放时基本都是使用 vue ...

  7. html网页制作教程按钮添加,网页制作html5自定义video标签的海报与播放按钮功能...

    一.问题 1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div ...

  8. html video 修改封面,html5自定义video标签的海报与播放按钮功能

    一.问题 1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div ...

  9. html5背景图片上放按钮,html5自定义video标签的海报与播放按钮

    文章目录 一.问题 1.默认播放按键不好看 2.设置自定义封面图 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div的背景 2. ...

最新文章

  1. 三菱工业机器人rv6s_FANUC机器人控制器—维护三要素
  2. java 调用父级方法_java子类调用父类的方法中包含子类重写的实例方法
  3. abap 单元格级别的操作ALV.
  4. wxWidgets:wxTimePickerCtrl类用法
  5. 【渝粤题库】国家开放大学2021春2096经济法学题目
  6. php中goto另一个页面,php中goto操作符的详细介绍
  7. python 多进程 多核_go/node/python 多进程与多核cpu
  8. gitlab mr wip 怎么弄成_基于GitLab的工作流程设计
  9. Redis所需内存 超过可用内存怎么办
  10. unity ui框架_[教程汇总+持续更新]Unity从入门到入坟——收藏这一篇就够了
  11. R语言——决策树模型
  12. android监听自身被卸载的方法
  13. 正确姿势使用arm-linux-androideabi-addr2line
  14. eplan 电箱布局_Eplan 的从头到尾完成3D布局步骤说明
  15. java与wps_java能否wps调用页码
  16. python 实现复数计算器
  17. e4a 蓝牙温度app_IIOT应用之Arduino无线蓝牙温湿度和距离测量系统
  18. 【Linux】ssh支持的加密算法有哪些?
  19. 关于下载表格数据乱码的解决方案
  20. elementui去掉表格所有边框

热门文章

  1. 配置Eureka高可用
  2. phpstuday 修改网站访问目录
  3. Codechef Chef Cuts Tree
  4. 洛谷 - P1142 - 轰炸 - 计算几何
  5. C# Http方式下载文件到本地类改进版
  6. 6.Python补充_Python之道
  7. 入围51CTO 2009年度“最受读者欢迎的IT图书作者”评选
  8. php定义常量 define vs const
  9. 【我的Android进阶之旅】如何快速寻找Android第三方开源库在Jcenter上的最新版本...
  10. 0x08 大数据分析,七层基本功