<audio> 标签属性:

  • src:音乐的URL
  • preload:预加载
  • autoplay:自动播放
  • loop:循环播放
  • controls:浏览器自带的控制条
<audio id="media" src="http://www.abc.com/test.mp3" controls></audio>

<video> 标签属性:

  • src:视频的URL
  • poster:视频封面,没有播放时显示的图片
  • preload:预加载
  • autoplay:自动播放
  • loop:循环播放
  • controls:浏览器自带的控制条
  • width:视频宽度
  • height:视频高度
<video id="media" src="http://www.abc.com/test.mp4" controls width="400px" heigt="400px"></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; //返回当前资源的URLMedia.src = value; //返回或设置当前资源的URLMedia.canPlayType(type); //是否能播放某种格式的资源Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源Media.load(); //重新加载src指定的资源Media.buffered; //返回已缓冲区域,TimeRangesMedia.preload; //none:不预载 metadata:预载资源信息 auto://准备状态Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATAMedia.seeking; //是否正在seeking//回放状态Media.currentTime = value; //当前播放的位置,赋值可改变位置Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0Media.duration; //当前资源长度 流返回无限Media.paused; //是否暂停Media.defaultPlaybackRate = value;//默认的回放速度,可以设置Media.playbackRate = value;//当前播放速度,设置后马上改变Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文Media.seekable; //返回可以seek的区域 TimeRangesMedia.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/iack/p/3536620.html

[转载]HTML5 Audio/Video 标签,属性,方法,事件汇总相关推荐

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

    2019独角兽企业重金招聘Python工程师标准>>> <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放c ...

  2. html5 video 播放状态,10分钟了解HTML5的Video标签属性、方法和事件

    标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width ...

  3. 直接修改html代码视频进度,HTML5实现video标签的自定义播放进度条

    现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: HTML5-Video-Player .videoPlayer{ border: ...

  4. vue3-video-play视频组件的使用(一)——基本使用 HTML5中Video标签的属性、方法和事件汇总

    vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...

  5. html5的vidoe标签,HTML5的Video标签的属性,方法和事件

    大多数的视频通过插件(例如flash)来播放,然而并非所有的浏览器都支持此类插件.HTML5规定了一种通过video来包含视频的标准方法.但是IE8及以下版本不支持video. HTML5的video ...

  6. php video标签使用方法,HTML_HTML5 video标签(播放器)学习笔记(一):使用入门,近有在学习html5中video标签(播 - phpStudy...

    HTML5 video标签(播放器)学习笔记(一):使用入门 近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...

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

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

  8. 关于html5的video标签不能播放视频的问题及解决方法

    最近实习过程中遇到了音频视频流的格式问题,进行了一些学习和总结. 问题背景 使用html5中的 video 标签去播放视频,但是发现有的flv/mp4格式的视频可以播放,有的flv/mp4格式的视频不 ...

  9. html5的video标签自动播放处理方法

    网上有很多解决方案,都不能真正的解决问题,于是自己尝试了一下. video 标签属性 src: 设置显示视频路径 controls: 显示控制栏 loop: 控制视频循环播放 autoplay: 自动 ...

  10. h5禁用浏览器下载视频_【HTML5】video 标签禁用自带的下载按钮

    h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 video::-internal-media-controls-download-button { display:n ...

最新文章

  1. Java中主线程如何捕获子线程抛出的异常
  2. python 获取公网 外网 ip 几种方式
  3. boost::mpl::integral_c用法的测试程序
  4. leetCode 41.First Missing Positive (第一个丢失的正数) 解题思路和方法
  5. 朱石景 201671010457 团队项目评审课程学习总结
  6. php微信转发无法显示标题图片,完美解决:微信分享为什么不显示图片呢? - 老牛博客...
  7. 热门好用的IP归属地API
  8. python search函数 中文,Python-re中search()函数怎么用
  9. Tocmat的中文问题解决方法总结:mxz
  10. 不知道怎么识别手写文字?快来看这些手写文字识别成文档软件
  11. 厦门航空谁让你如此霸王
  12. [TC6194]AllWoundUp
  13. python 选择排序 快速排序
  14. 工程流体力学笔记暂记27 (沿程损失系数的实验研究)
  15. MyDog框架安装步骤
  16. FeignClient调用超时处理方案
  17. Linux内核转储---Kdump,Crash使用介绍
  18. UE4学习笔记:混合空间(BlendSpace)的使用
  19. 蓝牙室内定位UWB多技术融合趋势
  20. 我们小公司使用了6年的项目部署方案,打包 + 一键部署详解,稳的一批

热门文章

  1. WINDOWS PHONE死于自己不兼容
  2. 管理感悟:错误是员工的,责任是领导的
  3. day11_界面闪烁处理
  4. tns无监听程序_成ORA-12560: TNS: 协议适配器错误的问题的原因
  5. 为什么家里pm25比外面高_夫妻感情很好,男人为什么还会找情人?这是我听过最好的答案...
  6. mysql创建的数据库保存在哪里_在MySQL中创建数据库时,我的数据库保存在哪里?...
  7. 在线选课网站用什么服务器,高校网上选课系统 PC服务器替代小型机
  8. 算法面试题 java_【面试算法题】Java Stack 类的使用
  9. vi+ctags 阅读源码
  10. web页面渲染(二) 1