【HTML5】——音视频处理
来源:互联网 发布:数据交换平台部署架构 编辑:程序博客网 时间:2024/06/06 18:29
1.视频处理
1.1 video元素
1.2 video元素的属性
1.3 video的高级用法(方法)
1.4 video的高级用法(事件)
1.5 video的高级用法(属性)
2.音频处理
2.1.audio的高级用法
3.video.js类库
h5支持的视频格式:
- mp4:目前比价主流的视频格式
- ogg:视频扩展名是.ogv,手机端的视频格式
- WebM:目前唯一一个支持超高清的视频格式,该视频格式出自Google
引入视频元素
属性:
1. src:视频地址
2. autoplay:自动播放
3. width:设置视频宽度
4.height:设置视频高度
注意:
1. 视频的宽高比不会改变
2.在video元素内定义不支持的提示内容
source元素可以引入多个格式的视频文件
作用:实现各个浏览器的兼容性
注意:视频的宽高比不会改变; 在video元素内定义不支持的提示内容
- autoplay属性:自动播放
- controls属性:提供控制面板
- loop属性 : 循环播放
- poster属性 : 播放之前显示一张图片
- preload属性 : 预加载(视频)
none - 不加载
auto - (默认值)自动(尽快加载完毕)
metadata - 只加载除视频之外的信息(宽和高)
<video src="video/oceans-clip.mp4" poster="video/oceans-clip.png" controls> 视频无法播放!</video>
video的高级用法(方法)- play():播放视频
- pause():暂停播放
- load():加载媒体文件
- canPlayType(type):查看浏览器是否支持该格式
- progress:下载进度
- canplaythrough:整体播放顺利时触发
- canplay:可播放时触发(不考虑整体)
- ended:结束视频时触发
- pause:暂停视频时触发
- play:播放视频时触发
- error:播放错误时触发
实例:页面中插入广告:
<!doctype html><html lang="lang"><head> <meta charset="UTF-8"> <title>video元素</title> <style> #ad { position: relative; top: -225px; left: 170px; display: none; } </style></head><body><video src="video/oceans-clip.mp4" id="media" controls> 视频无法播放!</video><div id="ad"><img src="video/3602.png" style="width: 280px"></div><script type="text/javascript"> var media = document.getElementById("media"); media.addEventListener("play", myPlay); media.addEventListener("pause", myPause); var oDiv = document.getElementById("ad"); function myPlay() { console.log("视频已播放"); oDiv.style.display = "none"; } function myPause() { console.log("视频已暂停"); oDiv.style.display = "block"; } // 全屏播放时,图片无法显示 // 全屏播放时,会自动设置为页面中最顶端的元素</script></body></html>
video的高级用法(属性)- paused:判断视频当前是否暂停,暂停返回true
- ended:判断视频当前是否结束播放,结束返回true
- duration:当前视频的总时长
- currentTime:表示当前视频播放的位置,还可以设置
自制播放暂停按钮:
<!doctype html><html lang="lang"><head> <meta charset="UTF-8"> <title>video元素</title></head><body><video src="video/oceans-clip.mp4" id="media"> 视频无法播放!</video><br/><input type="button" value="播放" id="btn"/><script type="text/javascript"> var btn = document.getElementById("btn"); btn.addEventListener("click", myclick); var media = document.getElementById("media"); function myclick() { if (media.paused) { //播放视频 play() media.play(); btn.value = "暂停"; } else { media.pause(); btn.value = "播放"; } }</script></body></html>
2.音频处理目前HTML页面实现音频处理:
1.将Window Media Player播放器,内置在页面中
2.使用flash技术实现
3.HTML5实现
支持的音频格式:
1. mp3
2. ogg
3. wav
如何使用音频:
1. audio元素:引入一种音频格式
2. audio元素+source元素:引入多种音频格式
音频的属性:
1. autoplay:自动播放
2. controls:提供控制面板
3. loop:循环播放
4. preload:缓存设置,预加载
事件:
1. play:播放音频时触发
2. pause:暂停音频时触发
方法:
1. play():播放音频
2. pause():暂停音频
属性:
pause:true表示暂停
注意:无论音频还是视频,IE8及以下都不支持。
视频或者音频不同浏览器支持格式可能不相同。
http://www.videojs.com
- 【HTML5】——音视频处理
- HTML5 音频 视频处理
- HTML5音频和视频处理
- 我的HTML5之旅——音、视频
- 第二节 html5学习——视频
- html5篇——音频/视频
- html5笔记—— 插入视频音频
- 互联网中的视频(HTML5) — (1)
- HTML5新特性之-—视频
- html5 笔记6 — 视频、音频
- android webkit html5视频处理框架
- [Web前端]梳理-HTML5.4.视频处理
- selenium处理HTML5的视频播放
- HTML5音频和视频的处理
- HTML5-音频和视频的处理
- HTML5-音频和视频的处理
- 视频处理——ffmpeg
- HTML5 02 音视频介绍
- 工作总结
- 1.Hibernate框架之Hello Word
- 游戏数据分析框架
- str和repr的区别
- quick 3.2 android 返回键功能
- 【HTML5】——音视频处理
- Jibx 结合 ant使用的一些心得
- NOIP初赛模拟赛总结
- A query was run and no Result Maps were found for the Mapped Statement
- Java文件读操作(两种read方法)
- pdf转CAD怎么转方便
- Java设计模式_(行为型)_命令模式
- Java 发送邮件 传入收件邮箱和邮件内容,返回发送状态
- 数字三角形问题