HTML5学习笔记(二)视频与音频处理 ╰半夏微凉° 2022-04-18 05:41 244阅读 0赞 一、<video> 1、<video>是H5的新标签,用来处理视频,在此之前,各网站用来处理视频一直使用flash技术 flash的缺点有以下几方面,首先浏览器原生不支持,需要插件,其次过多的使用会导致网站性能变差,最后就是智能移动端并不支持Flash技术 与flash相比,<video>的优势,几乎所有浏览器原生支持<video>元素,性能更高,开发更容易,并且移动端支持非常好, 2、<video>支持的视频格式 MP4格式 - 目前比较主流 OGG格式 - 多用于移动端 WebM格式 - 目前唯一支持超高清格式, 在HTML页面中支持超高清格式(HTML5) 3、如何使用<video> 如果当前浏览器不支持<video>元素,在<video>元素内编写提示内容 使用<source>元素 <video> <strong>抱歉,你的浏览器不支持播放</strong> <source src="一种视频格式" /> <source src="一种视频格式" /> <source src="一种视频格式" /> </video> 4、<video>元素的属性 src - 引入视频文件的路径 autoplay - 自动播放视频 controls - 提供控制面板 loop - 表示循环播放 poster - 设置播放之前显示的图片 width和height - 设置显示视频的宽度和高度 preload - 预加载 auto - (默认值)自动加载 none - 不加载 metadata - 只加载视频的基本信息(不含视频) 例、<video src="1.mp4" controls poster="2.png" width="640" height="400" style="background:black"></video> 5、高级使用内容 ①方法 play() - 播放视频 pause() - 暂停视频 load() - 加载视频 canPlayType() - 判断当前浏览器是否支持指定视频格式 ② 事件 play - 当视频播放时被触发 pause - 当视频暂停时被触发 ended - 当视频结束时被触发 error - 当视频错误时被触发 canplay - 不考虑整体情况下,只要能播放,就播放 canplaythrough - 考虑整体情况下,只要能播放,就播放 progress - 表示视频加载的进度 ③ 属性 - 用于判断 paused - 表示判断当前视频是否暂停 返回Boolean值,true表示暂停,false表示播放 ended - 表示判断当前视频是否播放完毕 返回Boolean值,true表示完毕 duration - 表示当前视频的时长 currentTime - 表示当前视频播放的位置 二、<audio> 1、<audio>元素支持音频格式 MP3 - 目前最主流 OGG WAV 2、使用<audio>元素 第一种 - 只支持一种音频格式 <audio src="音频文件的路径"></audio> 第二种 - 同时引入多个音频格式 <audio> <source src="一种音频格式" /> <source src="一种音频格式" /> <source src="一种音频格式" /> </audio> 3、属性与和方法与<video>基本相同,不做累述
还没有评论,来说两句吧...