HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及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标签实现视频播放,音频播放相关推荐
- html audio 路径,HTML中的audio和video标签讲解
关于标签讲解:点击这里 这里来一段简单的html5的音频代码: 您的浏览器不支持 audio 标签. 在audio标签中加入的文字,可以让浏览器在不支持audio标签的时候显示出提示文字. Inter ...
- ie8 html 语音标签,让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在 里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. ②又要无休止的找ie8的解决方法,自 ...
- audio与video标签支持的文件格式
audio与video标签支持的文件格式 1.audio标签支持的文件格式 (1)ogg:一种新的音频压缩格式,是完全免费.开放和没有专利限制的 (2)mp3:是一种音频压缩技术.它被设计用来大幅度地 ...
- HTML5新增的video标签,HTML5中video标签的使用方法
HTML5中video标签的使用方法 发布时间:2020-08-27 11:33:56 来源:亿速云 阅读:100 作者:小新 这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...
- HLS播放:html5下用video标签来播放m3u8格式的视频
HLS播放:html5下用video标签来播放m3u8格式的视频 <video class="tvhou" width="100%" height=&qu ...
- Vue如何使用video标签实现视频播放
Vue如何使用video标签实现视频播放 具体内容如下 **项目需求:**动态显示视频滚动条.禁止视频下载.播放时每5s更新当前时长.每10分钟暂停视频显示提示. 之前做视频播放时基本都是使用 vue ...
- html网页制作教程按钮添加,网页制作html5自定义video标签的海报与播放按钮功能...
一.问题 1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div ...
- html video 修改封面,html5自定义video标签的海报与播放按钮功能
一.问题 1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div ...
- html5背景图片上放按钮,html5自定义video标签的海报与播放按钮
文章目录 一.问题 1.默认播放按键不好看 2.设置自定义封面图 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div的背景 2. ...
最新文章
- 三菱工业机器人rv6s_FANUC机器人控制器—维护三要素
- java 调用父级方法_java子类调用父类的方法中包含子类重写的实例方法
- abap 单元格级别的操作ALV.
- wxWidgets:wxTimePickerCtrl类用法
- 【渝粤题库】国家开放大学2021春2096经济法学题目
- php中goto另一个页面,php中goto操作符的详细介绍
- python 多进程 多核_go/node/python 多进程与多核cpu
- gitlab mr wip 怎么弄成_基于GitLab的工作流程设计
- Redis所需内存 超过可用内存怎么办
- unity ui框架_[教程汇总+持续更新]Unity从入门到入坟——收藏这一篇就够了
- R语言——决策树模型
- android监听自身被卸载的方法
- 正确姿势使用arm-linux-androideabi-addr2line
- eplan 电箱布局_Eplan 的从头到尾完成3D布局步骤说明
- java与wps_java能否wps调用页码
- python 实现复数计算器
- e4a 蓝牙温度app_IIOT应用之Arduino无线蓝牙温湿度和距离测量系统
- 【Linux】ssh支持的加密算法有哪些?
- 关于下载表格数据乱码的解决方案
- elementui去掉表格所有边框
热门文章
- 配置Eureka高可用
- phpstuday 修改网站访问目录
- Codechef Chef Cuts Tree
- 洛谷 - P1142 - 轰炸 - 计算几何
- C# Http方式下载文件到本地类改进版
- 6.Python补充_Python之道
- 入围51CTO 2009年度“最受读者欢迎的IT图书作者”评选
- php定义常量 define vs const
- 【我的Android进阶之旅】如何快速寻找Android第三方开源库在Jcenter上的最新版本...
- 0x08 大数据分析,七层基本功