• 售前

  • 售后

热门帖子
入门百科

HTML5中的音频和视频媒体播放元素小结

[复制链接]
上善若水8L8 显示全部楼层 发表于 2021-10-26 13:29:15 |阅读模式 打印 上一主题 下一主题
音频和视频的编码/解码器是一组算法,用来对一段特定的音频或视频流举行编码和解码,以便音频和视频可以或许播放。原始的媒体文件体积非常大,假如不对其举行编码,那么构成一段视频和音频的数据可能会非常巨大,以至于在因特网上流传需泯灭无法忍受的时间。若没有解码器的话,吸取方就不能把编码过的数据重组为原始的媒体数据。编解码器可以读懂特定的容器格式,并且对其中的音频轨道和视频轨道解码。
理解媒体元素
1、基本操纵:声明媒体元素

XML/HTML Code复制内容到剪贴板
       
  • <audio controls src="Adele-Set Fire To The Rain.mp3">      
  • 您所利用的浏览器不支持HTML5 audio      
  • </audio>  
代码中的controls 特性是告诉浏览器表现通用的用户控件,包罗开始、制止、跳播以及音量控制。假如不指定controls属性,用户将无法播放页面上的音频。
2、利用source元素
最简单的环境下,src属性直接指向媒体文件就可以了,但是,万一浏览器不支持相干容器或者编码器呢?这就必要用到备用声明白。备用声明中可以包含多种泉源,浏览器可以从这么多的泉源中举行选择:

XML/HTML Code复制内容到剪贴板
       
  • <audio controls>      
  • <source  src="Adele-Set Fire To The Rain.mp3" >      
  • <source  src="Adele-Set Fire To The Rain.ogg" >      
  • </audio>  
对于泉源,浏览器会按照声明顺序判定,假如支持的不止一种,那么浏览器会选择支持的第一个泉源。
3、媒体的控制
在audio元素或video元素中通过设置特性autoplay,不必要任何用户交互,音频或视频文件就会在加载完成后主动播放。
常用的控制函数

            函数            动作                            load()            加载音频/视频文件,为播放做准备,通常环境下不必调用,除非是动态天生的元素。用来在播放前预加载。                            play()            加载(有须要的话)并播放音频/视频文件。除非音频/视频已经停息在其他位置了,否则默认从头开始播放                            pause()            停息处于播放状态的音频/视频文件                            canPlayType(type)            测试video元素是否支持给定MIME范例的文件        
只读的媒体特性
            只读特性            值                            duration            整个媒体文件的播放时长,以s为单位。假如无法获取时长,则返回NaN。                            paused            假如媒体文件当前被停息,则返回true。假如还未开始播放,则返回false。                            ended            假如媒体文件已经播放完毕,则返回true                            startTime            返回最早的播放起始时间,一样平常是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区                            error            在发生了错误的环境下返回的错误代码                            currentSrc            以字符串情势返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件。        
可脚本控制的特性值
            特性            值                            autoplay            将媒体文件设置为创建后主动播放,或者查询是否已设置为autoplay                            loop            假如媒体文件播放完毕后能重新播放则返回true,或者将媒体文件设置为循环播放(或者不循环播放)                            currentTime            以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来举行搜刮,并定位到媒体文件的特定位置                            controls            表现或隐藏用户控制界面,或者查询用户控制界面当前是否可见                            volume            在0.0到1.0之间设置音频音量的相对值,或者查询当前音量的相对值。                            muted            为音频文件设置静音或者消除静音,或者渐层当前是否为静音                            autobuffer            关照播放器在媒体文件开始播放前,是否举行缓冲加载。假如媒体文件已经设置为autoplay,则忽略测特性。        
3.1利用audio和video元素
HTML5 video元素同audio元素非常类似,只是比audio元素多了一些特性。
            特性            值                            poster            在视频加载完成之前,代表视频内容的图片的URL地点,可以想象一下“影戏海报”。该特性不但可读,而且可以修改,以便更换图片                            width、height            读取或设置表现尺寸。假如设置的宽度与视频自己巨细不匹配,可能导致居中表现,上下或左右可能出现玄色条状区域。                            videoWidth、videoHeight            返回视频固有的或自适应的宽度和高度。只读video元素另有一个audio元素不支持的关键特性:可被HTML5 Canvas的函数调用。        
提示:当canvas利用视频作为绘制泉源时,画出来的只是当前播放的帧。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作