HTML5之音频与视频

最新推荐文章于 2022-08-16 18:58:47 发布
最新推荐文章于 2022-08-16 18:58:47 发布
阅读量759 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013267266/article/details/51351313
版权

HTML5之音频与视频

l  标签

•     audio 、video

•     source

l  视频容器

•     容器文件，类似于压缩了一组文件

–    音频轨道

–    视频轨道

–    元数据：封面，标题，字幕等

–    格式：.avi、.flv、.mp4、.mkv、.ogv等

l  编解码器

•     原始的视频容器非常大，添加需编码，播放需解码

•     音频编解码器

–    AAC、MPEG-3、Ogg Vorbis

•     视频编解码器

–    H.264、VP8、Ogg Theora

        编解码器：每个浏览器可能用的编解码器不同，有开源，也有收费的。

编解码器在加载到页面时进行压缩，当点击播放时，再解码，放大。

 

<body>

<audio controlssrc="johann_sebastian_bach_air.mp3"></audio>

<!--<video controlssrc="Intermission-Walk-in.ogv"></video>-->//这种方式IE不支持改用下面的方式

<video controls>

         <sourcesrc="Intermission-Walk-in.ogv"></source>

   <sourcesrc="Intermission-Walk-in_512kb.mp4"></source>//IE执行这一条

</video>

</body>

 

注意：

必须加控件才能显示

IE下没有对ogv格式的视频进行编解码器

Source 如果不支持，走下一条

 

 

 

 

l  媒体元素

•      controls  :   显示或隐藏用户控制界面

•      autoplay  :  媒体是否自动播放

•      loop  : 媒体是否循环播放

•      currentTime  :  开始到播放现在所用的时间

•      duration  :  媒体总时间(只读)

•      volume  :  0.0-1.0的音量相对值

•      muted  :   是否静音

•      autobuffer  :   开始的时候是否缓冲加载，autoplay的时候，忽略此属性

 

 

 

 

•   currentTime  :  开始到播放现在所用的时间

可以读取，也可以设置

可以设置刚开始进入时开始的播放时间

 

window.onload =function(){

     var oA = document.getElementById('a1');

     setInterval(function(){

               console.log(oA.currentTime);

     },1000);

     //oA.currentTime = 60;//播放从60开始

};

</script>

</head>

<body>

<audioid="a1" controlssrc="johann_sebastian_bach_air.mp3"></audio>

</body>

 

 

•   duration  :  媒体总时间(只读)

•   volume  :  0.0-1.0的音量相对值

                        音量从0到1的值   0为静音

•   muted  :   是否静音

Flase 表示不是静音

 

window.onload =function(){

     var oA = document.getElementById('a1');     

     console.log( oA.duration );

     console.log( oA.volume );

     console.log( oA.muted );

};

</script>

</head>

<body>

<audioid="a1" controls src="johann_sebastian_bach_air.mp3"></audio>

</body>

 

 

播放总时间

 

 

 

•       autobuffer  :  开始的时候是否缓冲加载，autoplay的时候，忽略此属性

页面一加载，则已经加载，不需要在播放器点开始时才加载

 

 

l  媒体元素_2

•      paused  :   媒体是否暂停(只读)

•      ended   :   媒体是否播放完毕(只读)

•      error   :  媒体发生错误的时候，返回错误代码 (只读)

•      currentSrc  :   以字符串的形式返回媒体地址(只读)

•      play()  :  媒体播放

•      pause()  :  媒体暂停

•      load()  :  重新加载媒体

 

 

 

•          paused  :   媒体是否暂停(只读)

•          ended   :   媒体是否播放完毕(只读)

•          error   :  媒体发生错误的时候，返回错误代码 (只读)

•          currentSrc  :  以字符串的形式返回媒体地址(只读)

 

window.onload =function(){

   var oA = document.getElementById('a1');

   console.log( oA.paused );

   console.log( oA.ended );

   console.log( oA.error );

   console.log( oA.currentSrc );

};

</script>

</head>

<body>

<audioid="a1" controlssrc="johann_sebastian_bach_air.mp3"></audio>

</body>

 

 

 

 

 

 

 

•       play()  :  媒体播放

•       pause()  :  媒体暂停

•       load()  :  重新加载媒体

 

鼠标移入，播放，移出，暂停播放

改完地址后必须用load重新加载

window.onload = function(){

         varoV = document.getElementById('v1');

         varoInput = document.getElementById('input1');

         varaS = document.getElementsByTagName('source');

         oV.οnmοuseοver= function(){

                   this.play();

         };

         oV.οnmοuseοut= function(){

                   this.pause();

         };

         oInput.οnclick= function(){

                   aS[0].src= 'xxxx.mp4';

                   aS[1].src= 'yyyy.mp4';

                   oV.load();

         };

};

</script>

</head>

<body>

<input type="button"value="重新加载" id="input1" />

<video id="v1">

         <sourcesrc="Intermission-Walk-in.ogv"></source>

   <sourcesrc="Intermission-Walk-in_512kb.mp4"></source>

</video>

</body>

 

 

l  媒体元素_3 --媒体元素事件

•      loadstart progress suspendemptied stalled play pause loadedmetadata loadeddata waiting playing canplaycanplaythrough seeking seeked timeupdate ended ratechange durationchangevolumechange

 

Ended播放完成后执行，弹出123

window.onload = function(){

         varoV = document.getElementById('v1');

         oV.addEventListener('ended',function(){

                   alert(123);

         },false);

};

</script>

</head>

<body>

<video controls id="v1">

         <sourcesrc="Intermission-Walk-in.ogv"></source>

   <sourcesrc="Intermission-Walk-in_512kb.mp4"></source>

</video>

</body>

 

 

 

l  Video额外特性

•      poster  :   视频播放前的预览图片

•      width、height  :   设置视频的尺寸

•      videoWidth、 videoHeight  :   视频的实际尺寸(只读)

实际尺寸，即使修改，也能查找原来的元素大小

 

window.onload = function(){

         varoV = document.getElementById('v1');

         oV.poster= '2.png';

         oV.width= 500;

         oV.height= 500;

         alert(oV.videoWidth );

         oV.addEventListener('ended',function(){

                   alert(123);

         },false);

};

</script>

</head>

<body>

<video controls id="v1">

         <sourcesrc="Intermission-Walk-in.ogv"></source>

   <sourcesrc="Intermission-Walk-in_512kb.mp4"></source>

</video>

</body>

 


tianshizhimeng155
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5音频与视频实例（带声音的导航、视频与canvas结合、自制播放器）
努力，追梦的博客
05-09 6331
实例1：带声音的导航   无标题文档 *{ margin:0; padding:0;} #ul1{ width:1000px; height:30px;} #ul1 li{ list-style:none; width:100px;height:30px; background:red; color:white; border:1px #000 solid; floa
HTML5本地视频播放器设计（+弹幕功能）
Maci_yera的博客
05-27 1万+
重点是设计html5播放器交互界面，滑动条，页面布局，简易弹幕 1.整体外观： 2.完整代码很长，所以不放了，之后上传。 3. （1）首先是布局，通过居中的div控制整个区域居中，上边是video 下边是control块，再下方是弹幕输入框。理解position属性，将进度条、时间、音量区域、全屏区域通过css设定属性放在control块中。 （2）播放按钮是纯css制作，.play{
html5 video 选择音轨,触发一个HTML5音轨播放时，它已经加载
weixin_29731583的博客
06-03 381
如果加载成功，无论是使用src属性还是使用源元素，那么随着数据的下载，会触发进度事件。当加载足够的数据来确定视频的尺寸和持续时间时，会触发加载的元数据事件。当足够的数据被加载到渲染帧时，loadeddata事件被触发。当数据已被加载以便能够播放一点点的视频时，会发射一个canplay事件。当浏览器确定它可以在不停止下载更多数据的情况下播放整个视频时，就会触发canplaythrough事件;这也是...
html5 video 文本轨道,VideoJS-轨道-文本轨道
weixin_32539505的博客
06-22 669
原文https://docs.videojs.com/tutorial-tracks.htmlVideoJS当前有三种类型的轨道(tracks)：音频轨道(Audio Tracks)视频轨道(Video Tracks)文本轨道(Text Tracks)下面我们依次来进行介绍这三种轨道文本轨道文本轨道用于显示字幕和标题，并添加用于在视频中的章节之间进行导航的菜单。文本轨道是HTML5的一项功能，用于...
html5可视化音频音阶播放代码.zip
07-04
html5可视化音频音阶播放代码是一款html5基于canvas属性制作mp3音乐播放，可视化音频音阶播放过程。
利用HTML5 Web Audio API给网页JS交互增加声音
weixin_30902675的博客
09-10 345
一、庞然的HTML5 Web Audio API 首先务必要弄清这一点，本文这里所说的HTML5 Web Audio API和HTML5<audio>元素完全不是一个东西，其体量也完全不是一个等级的，HTML5 Web Audio API接口的丰富程度和体量可以和HTML canvas API相提并论，其能实现的功能也非常令人瞠目。 HTML5 Web Audio API可以让我...
网页上的视频只有图像无声音——解决方法
cjx44的专栏
11-05 1411
问题详细一点如下：1、系统栏里的声音控制图标不见了，打开控制面板，声音、语音和音频设备子项里，音 量选项卡的将音量图标放入任务栏里选项已打勾。 2、声音播放正常，但关机声音、启动声音、注销声音都没有，重新安装驱动问题依然； 3、在声音、语音和音频设备子项里的各种选项卡里有问题： A)在音量选项卡里，各项完全正常； B)在语声选项卡里，声音播放的默认设备为空； C)在音频选项卡里，midi音乐播放的
详解移动端HTML5音频与视频问题及解决方案
09-27
主要介绍了详解移动端HTML5音频与视频问题及解决方案的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML5中视频音频的使用详解
09-28
主要给大家总结介绍了关于HTML5中视频音频的使用的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
HTML5实现音频和视频嵌入的方法
09-22
主要介绍了HTML5实现音频和视频嵌入的方法的相关资料，原生的支持音频和视频，为HTML5注入了巨大的发展潜力，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML5中的音频和视频媒体播放元素小结
09-28
主要介绍了HTML5中的音频和视频媒体播放元素小结,是网站页面多媒体开发的基础知识,需要的朋友可以参考下
Vue调用摄像头录制视频和音频并上传给后端或下载到本地
weixin_47424753的博客
08-16 5712
VUE录制视频；VUE录制音频：视频下载；视频回放；
Android中通过Intent 调用图片、视频、音频、录音、拍照
iceheart0703的小窝
07-24 598
//选择图片 requestCode 返回的标识 Intent intent = new Intent(Intent.ACTION_GET_CONTENT); //"android.intent.action.GET_CONTENT" intent.setType(contentType); //查看类型 String IMAGE_UNSPECIFIED = "image/*"; Intent w
h5+实现手机端的录音，拍照，录像
热门推荐
wj903829182的专栏
11-21 4万+
使用h5+即h5plus可以实现调用手机的功能实现语音的录制播放，图片上传下载，拍照，录像的功能，并提供上传下载的功能。开发工具使用hbuilder，该开发工具有模板和demo可以参考实现快速的开发app功能。使用h5调用硬件的功能，实现原生的效果，前端开发app周期短，开发速度快，入门门槛低，hbuilder还提供了一个mui库，可以实现很多手机原生ui的效果。
写个录音机就这么难么
weixin_30487201的博客
10-20 87
早晨忙活了一个早晨别的 上午休息了一个上午 下午开始写录音机 一个下午，录音机的大致框架完成了 无非就是录音、播放、录音、播放 但是录音的长短是有限制的。而我又不会循环录音 哎，明天又要忙一天了。 转载于:https://www.cnblogs.com/suanguade/p/4038229.html...
getusermedia,拍照上传功能：
jinglier520的专栏
05-16 1673
getusermedia： http://html5doctor.com/getusermedia/ 拍照上传功能： http://www.dotblogs.com.tw/shadow/archive/2012/04/01/71209.aspx http://blog.csdn.net/hfahe/article/details/7354912#comments  chrom
HTML5调用手机摄像拍照、相册等功能<input[type=file]>样式美化及demo
Sweet__Cat程序媛的博客
08-22 9792
最近用MUI做了个移动端项目，设计中涉及到调用手机摄像头拍照等功能需求，然而在PLUS环境下才能直接调用，这就让人有点头疼了，后经查询资料学习了解到有一个很简单的方法就是input:file标签，不需要复杂代码操作就能实现调用拍照、相册等功能。//capture -- 设置选择需要调用的功能 //camera -- 照相机 //camcorder -- 摄像机 //microphone -- 录音
前端使用html5、ffmpeg实现录屏摄像等功能
weixin_33682790的博客
11-16 3204
前段时间做一个windows的桌面应用，vue + electron，涉及到录屏和摄像功能，网上相关的文档蛮少的给需要的人一些参考 如果文章描写有误或者还有更好的方法，请留言告诉我，笔芯 (´▽`ʃ♡ƪ) 背景介绍 ** 涉及技术：vue、electron、ffmpeg、node ** 关于录屏和摄像对比了两种方法 使用HTML5的api实现 摄像：mediaDevices（获取设备）+ ge...
h5 打开摄像头进行 截屏 拍照
weixin_45379180的博客
05-28 764
<!DOCTYPE html> <html lang="ZH-CN"> <head> <meta charset="utf-8"> <title>web拍照</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <style>
html5插入图片 视频 音频
最新发布
09-21
HTML5可以通过<img>标签插入图片，通过<video>标签插入视频，通过<audio>标签插入音频。 插入图片的格式如下： <img src="路径/图片文件名" alt="图片描述"> 插入视频的格式如下： <...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值