HTML5实现音频和视频嵌入,如何利用HTML5实现音频和视频嵌入的方法
这篇文章主要详情了HTML5实现音频和视频嵌入的方法的相关资料,原生的支持音频和视频,为HTML5注入了巨大的发展潜力,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
简介
HTML5未出来之前,在线的音频和视频都是借助Flash或者者第三方工具实现的,现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中,不需要安装任何插件就能播放音频和视频。原生的支持音频和视频,为HTML5注入了巨大的发展潜力。
html实现音频嵌入(传统方式):这种方式尽管可以实现,但是要浏览器支持Flash而且并不能实现控制,所以要实现起来很麻烦。
object>
那么也就是说HTML5存在一个很大的问题就是兼容性。音频
HTML5支持的音频格式:
视频
视频格式:
由上可知,HTML5貌似支持的格式有点少哈,所以当你发现用HTML5放置音频和视频不显示时,应该就是格式不支持的问题。注: MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264), 只有h264才是公认的MP4标准编码(在这也是被坑了,其余格式的只有声音没有图像。)遇到这种问题,就用视频格式转换器,转换一下格式就OK啦。
音频实现起来很简单:这里工具条使用了浏览器默认的工具条。
?
1
2
3
你的浏览器不支持video元素
audio>
视频尽管也可以使用浏览器默认的,但无法实现私人订制,所以从学技术的角度讲,还是要学习一下自己做工具实现功能(audio也可参照此方法)。
audioVideo.html
网页放置视频title>
style>
head>
你的浏览器不支持video元素
audio>
你的浏览器不支持audio元素
video>
1span>fps span>
播放button>
快进button>
慢进button>
后退button>
前进button>
静音button>
body>
html>
显示(html)与功能实现(js)分离,由外部导入
ControlBar.js
//使用脚本检测浏览器的标签支持情况
var support = !!document.createElement("audio").canPlayType;
if (!support) {
alert("你的浏览器不支持本视频播放");
}
// 定义全局的视频对象
var e1 = null;
window.addEventListener("load", function() {
e1 = document.getElementById("myPlayer");
});
/*前进:一分钟 */
function Next() {
e1.currentTime+=10; //设置属性currentTime,快进10s
}
/*后退:一分钟 */
function Prev() {
e1.currentTime-=10; //设置属性currentTime,后退10s
}
/*播放/暂停*/
function Play(e) {
if(e1.paused){
e1.play();
document.getElementById("btn1").innerHTML="暂停"
}else{
e1.pause();
document.getElementById("btn1").innerHTML="播放"
}
}
/*慢进:小于等于1时,每次都只减慢0.2的速率;大于1时,每次减1 */
function Slow(){
if(e1.playbackRate<=1){
e1.playbackRate-=0.2;
}else{
e1.playbackRate-=1;
}
document.getElementById("rate").innerHTML=fps2fps(e1.playbackRate);
}
/*慢进:小于等于1时,每次都只减慢0.2的速率;大于1时,每次减1 */
function Fast(){
if(e1.playbackRate<1){
e1.playbackRate+=0.2;
}else{
e1.playbackRate+=1;
}
document.getElementById("rate").innerHTML=fps2fps(e1.playbackRate);
}
function fps2fps(fps){
if(fps<1){
return fps.toFixed(1);
}else{
return fps;
}
}
/*静音*/
function Muted(e){
if(e1.muted){
e1.muted=false;
e.innerHRML="X";
document.getElementById("volume").value=e1.volume;
}else{
e1.muted=true;
e.innerHRML="x";
document.getElementById("volume").value=0;
}
}
/*调整音量*/
function Volume(e){
if(e1.muted==true){
e1.muted=false;
}
e1.volume=e.value;
}
/* 进度信息:控制进度条,并显示进度时间*/
function Progress(){
var p1=document.getElementById("progress");
p1.style.width=(e1.currentTime/e1.duration)*720+"px";
document.getElementById("info").innerHTML=s2time(e1.currentTime)+"/"+s2time(e1.duration);
}
function s2time(s){
var m=parseFloat(s/60).toFixed(0);
s=parseFloat(s%60).toFixed(0);
return (m<10? "0"+m:m)+":"+(s<10?"0"+s:s);
}
/* 网页加载完毕后,把进度解决函数增加至视频对象的timeupdate事件中*/
window.addEventListener("load",function(){
e1.addEventListener("timeupdate",Progress);
});
/*给window.onload事件增加进度解决函数*/
window.addEventListener("load",Progress);
实现的功能:播放,暂停,快进,慢进,前进,后退,音量控制,进度条和时间显示。由此可见通过Audio或者Video的属性和方法可以实现更复杂的功能。
HTML5实现音频和视频嵌入,如何利用HTML5实现音频和视频嵌入的方法相关推荐
- HTML5怎么让图片和文字重叠,利用HTML5实现全屏图片文字过渡切换特效
特效描述:利用HTML5实现 全屏图片 文字过渡 切换特效.利用HTML5实现全屏图片文字过渡切换特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Masupitami Wal ...
- 视频处理系列︱利用达摩院ModelScope进行视频人物分割+背景切换(一)
做了一个简单的实验,利用modelscope的人像抠图模型对视频流进行抠像并更换背景. 文章目录 1 视频人像抠图(Video human matting) 2 更换背景 1 视频人像抠图(Video ...
- java mcu视频_如何利用MCU流畅的播放视频?
Cortex-M7处理器的核心本质为微控制器,却拥有高达600MHz的主频,高密度的512KB TCM SRAM和16MB的高速SDRAM,超快的实时响应,超强处理性能赋予了RT1052视频编解码的能 ...
- html5绘制节点链接,利用HTML5实现网状结构节点动画特效
特效描述:利用HTML5实现 网状结构 节点动画特效.利用HTML5实现网状结构节点动画特效 代码结构 1. HTML代码 (function() { var canvas, ctx, circ, n ...
- html5实现粒子效果的文字,利用HTML5实现Canvas粒子文字特效
特效描述:利用HTML5实现 Canvas 粒子文字特效.利用HTML5实现Canvas粒子文字特效 代码结构 1. HTML代码 change /*jshint esversion:6*/ var ...
- html霓虹灯效果图,利用HTML5实现Canvas霓虹灯蜂巢特效
特效描述:利用HTML5实现 Canvas 霓虹灯 蜂巢特效.利用HTML5实现Canvas霓虹灯蜂巢特效 代码结构 1. HTML代码 /* because me lazy */ Object.ge ...
- 利用html5页面表白,利用HTML5实现七夕情人节表白代码
特效描述:利用HTML5实现七夕情人节表白代码.利用HTML5实现七夕情人节表白代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Th an ks for w atch ing! ...
- html打飞机游戏代码,利用HTML5 Canvas实现打飞机游戏
这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下 之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和 ...
- android html5播放器,用 HTML5 播放器在 iOS 或 Android 等移动设备上播放视频
如果你想把自己网站上的视频弄得能在 iOS 或者 Android 设备上播放,你需要想两个事儿,一个是你网站上的视频播放器要支持 HTML5,还有你的视频得支持在这些设备上看. 网站的视频播放器我们可 ...
- 即时通讯音视频开发(七):音频基础及编码原理入门
前言 即时通讯应用中的实时音视频技术,几乎是IM开发中的最后一道高墙.原因在于:实时音视频技术 = 音视频处理技术 + 网络传输技术 的横向技术应用集合体,而公共互联网不是为了实时通信设计的. 系列文 ...
最新文章
- R语言deLong‘s test:通过统计学的角度来比较两个ROC曲线、检验两个ROC曲线的差异是否具有统计显著性
- 1024,第 15 届「中国内核开发者大会」 参会指南(议程全剧透)
- 微信墙服务器地址,一面微信墙的诞生(3) 用户端界面的创建
- require.js使用教程
- hd_Lanswitch Web System
- 基于Matlab的人脸识别设计(PCA)
- 音响在线测试软件,汽车音响调音在线大师班(1):调音第一步,RTA检测播放表现...
- 面对疫情,大学生如何保持良好的心理状态
- 重启打印机(打印机任务无法取消时)
- 万字总结Linux内核过滤框架(Nftables)
- 银行存储管理系统oracle,课内资源 - 基于JSP和Oracle实现的志愿服务银行系统
- 九爷 带你玩转mysql引擎Mylsam
- 采购订单税码检查增强(badi)
- 计算机系统软件和应用软件的区别
- 【重磅】清华大学法学院教授何海波:以数据推动法治(视频+PPT)
- oracle vpd策略,oracle vpd 策略查询
- sharemouse怎么设置?
- 北航计算机学院上机试题,北航计算机系考研复试上机真题及答.pdf
- JAVA分布式事务原理及应用(转)
- 干货 | 美团如何基于深度学习实现图像的智能审核?
热门文章
- Vagrant安装和使用
- 6 errors and 0 warnings potentially fixable with the `--fix` option.
- maven 报错 Failed to execute goal on project ...: Could not resolve dependencies for project ...
- 声学模型训练-LDA算法
- 【错误解决】System.NotSupportedException:“LINQ to Entities does not recognize the method
- webpack与ts版本不兼容
- 网站被挂马了怎么办?
- 2022年全球光纤机械接头市场前景分析及研究报告
- Android通过修改配置文件设置wifi密码
- C语言键盘各键对应的键值