1. 首页
  2. IT资讯

前端必须理解知识点—HTML5音视频处理

“u003Cdivu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F32170000dcb4d5018dc7″ img_width=”400″ img_height=”300″ alt=”前端必须理解知识点—HTML5音视频处理” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E今天小编将分享前端开发中必学的知识点,HTML5中关于音视频处理u003Cu002Fpu003Eu003Ch1u003E视频处理u003Cu002Fh1u003Eu003Cpu003E基本内容:目前国内的视频网站 – Flash技术,HTML5的视频处理首先替换Flash技术,支持的视频格式有:u003Cu002Fpu003Eu003Cpu003E1.MP4 – .mp4 目前比较主流的视频格式。u003Cu002Fpu003Eu003Cpu003E2.OGG – .ogv 手机端的视频格式。u003Cu002Fpu003Eu003Cpu003E3.WebM – 目前唯一一个支持超高清视频格式,该视频格式出自Goggle公司。u003Cu002Fpu003Eu003Cpu003E问: 如何处理视频?u003Cu002Fpu003Eu003Cpu003E答:<video>元素 – 引入单个格式视频文件,它由自己的属性组成。 src属性 – 指定视频文件的地址, width属性 – 设置视频宽度, height属性 – 设置视频高度。语法规范:<video src=”视频文件路径” width=“100px”>u003Cu002Fpu003Eu003Cpu003E !!需要注意的是:视频的宽高比不会改变, 在video元素内定义不支持的提示内容。u003Cu002Fpu003Eu003Cpu003E如果要想在<video>元素引入多个格式视频文件,那么就使用<sourceu002F>,使用这种方式能够实现各个浏览器的兼容性,语法规范:u003Cu002Fpu003Eu003Cpu003E<video>u003Cu002Fpu003Eu003Cpu003E<source src=”视频文件路径1″u002F>u003Cu002Fpu003Eu003Cpu003E<source src=”视频文件路径2″u002F>u003Cu002Fpu003Eu003Cpu003E<source src=”视频文件路径3″u002F>u003Cu002Fpu003Eu003Cpu003E<u002Fvideo>u003Cu002Fpu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E <video>元素的属性u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E autoplay属性 – 自动播放u003Cu002Fpu003Eu003Cpu003E controls属性 – 提供控制面板u003Cu002Fpu003Eu003Cpu003E loop属性 – 循环播放u003Cu002Fpu003Eu003Cpu003E poster属性 – 播放之前显示一张图片u003Cu002Fpu003Eu003Cpu003E preload属性 – 预加载(视频)u003Cu002Fpu003Eu003Cpu003E none – 不加载u003Cu002Fpu003Eu003Cpu003E auto – (默认值)自动(尽快加载完毕)u003Cu002Fpu003Eu003Cpu003E metadata – 只加载除视频之外的信息(宽和高)u003Cu002Fpu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E video的高级用法 方法u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E play() – 播放视频u003Cu002Fpu003Eu003Cpu003E pause() – 暂停视频u003Cu002Fpu003Eu003Cpu003E load() – 加载视频u003Cu002Fpu003Eu003Cpu003E canPlayType() – 判断是否支持该格式u003Cu002Fpu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E事件u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E play – 播放视频时触发u003Cu002Fpu003Eu003Cpu003E pause – 暂停视频时触发u003Cu002Fpu003Eu003Cpu003E ended – 结束播放时触发u003Cu002Fpu003Eu003Cpu003E error – 播放错误时触发u003Cu002Fpu003Eu003Cpu003E canplay – 可播放时触发(不考虑整体)u003Cu002Fpu003Eu003Cpu003E canplaythrough – 整体播放顺利时触发u003Cu002Fpu003Eu003Cpu003E progress – 下载进度u003Cu002Fpu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E 属性u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E paused – 判断视频当前是否暂停,如果暂停状态,返回trueu003Cu002Fpu003Eu003Cpu003E ended – 判断视频当前是否结束播放,如果结束播放,返回trueu003Cu002Fpu003Eu003Cpu003E duration – 当前视频的总时长u003Cu002Fpu003Eu003Cpu003E currentTime – 获取或设置当前视频播放的位置u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F32170000dcda03ceed56″ img_width=”590″ img_height=”272″ alt=”前端必须理解知识点—HTML5音视频处理” inline=”0″u003Eu003Cu002Fpu003Eu003Ch1u003E 音频处理u003Cu002Fh1u003Eu003Cpu003E 基本内容:目前HTML页面实现音频处理,将Windows Media Player播放器,内置页面中,使用Flash技术实现音频处理,HTML5实现音频处理支持的音频格式有:u003Cu002Fpu003Eu003Cpu003E1.mp3 – 感谢百度(MP3)u003Cu002Fpu003Eu003Cpu003E2.oggu003Cu002Fpu003Eu003Cpu003E3.wavu003Cu002Fpu003Eu003Cpu003E 问: 如何使用音频?u003Cu002Fpu003Eu003Cpu003E答: audio元素 – 引入一种音频格式。u003Cu002Fpu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E <audio>元素的属性u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E src属性 – 引入音频文件,作用 – 实现页面背景音乐播放u003Cu002Fpu003Eu003Cpu003E audio元素 – 引入多种音频格式u003Cu002Fpu003Eu003Cpu003E source元素u003Cu002Fpu003Eu003Cpu003E autoplay – 自动播放u003Cu002Fpu003Eu003Cpu003E controls – 提供控制面板u003Cu002Fpu003Eu003Cpu003E loop – 循环播放u003Cu002Fpu003Eu003Cpu003E preload – 预加载u003Cu002Fpu003Eu003Cpu003E audio的高级用法u003Cu002Fpu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E事件u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E play – 播放音频时触发u003Cu002Fpu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E 方法u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E play() – 播放音频u003Cu002Fpu003Eu003Cpu003E pause() – 暂停音频u003Cu002Fpu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E属性u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E paused – true,表示暂停状态u003Cu002Fpu003Eu003Cpu003E !! 需要特别注意,IE 8及之前的版本都不支持u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F3200000068ac7e7ca54e” img_width=”500″ img_height=”300″ alt=”前端必须理解知识点—HTML5音视频处理” inline=”0″u003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:前端必须理解知识点—HTML5音视频处理

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11278.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code