`
树形设计者
  • 浏览: 17320 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

HTML5-audio和video API

 
阅读更多

检测浏览器是否支持audio元素或video元素最简单的方式是用脚本动态创建它,然后检测特定函数是否存在:

var hasVideo = !!(document.createElement('video').canPalyType);

这段脚本会动态创建一个video元素,然后检查vanPlayType()函数是否存在。通过“!!”运算符将结果转换成布尔值,就可以反映出水平对象是否已创建成功。

使用source元素

最简单的情况下,src特性直接指向媒体文件就可以了。

万一浏览器不支持相关容器或者编码器,这就需要用到备用声明了。备用声明中可以包含多种来源,浏览器可以从这么多的来源中进行选择:

例子:

<audio controls>
   <source src=".......ogg">
   <source src=".......mp3">
An audio clip from Johann Sebastian Bach.
</audio>

 注意:来源列表的排放顺序,要按照用户体验由高到低或者服务器消耗由低到高列出。

 

分享到:
评论

相关推荐

    vue-audio-visual-Vue HTML5音频可视化组件。-Vue.js开发

    vue视听Vue HTML5音频可视化组件概述安装和设置API通用道具AvLine道具AvBars道具AvCircle道具AvWavef vue视听Vue HTML5音频可视化组件概述安装和设置API常用道具AvLine道具AvBars道具AvCircle道具AvWaveform道具...

    jPlayer-HTML5 Audio & Video for jQuery

    A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and ...

    ph-audio-image-video-recorder:音频、图像和视频分量记录器

    ph-audio-image-video-recorder 该组件使您能够仅使用 HTML 标准录制音频和视频,而无需任何其他插件。 该组件为您提供了一个(尚未响应的)GUI 界面以... 录制视频(GetUserMedia/Stream API + Canvas + Whammy....

    Teach Yourself HTML5 Mobile Application Development in 24 Hours

    - Audio and Video in HTML5 - HTML5 Forms - Editing Content and User Interaction With HTML5 - Microformats and Microdata - Working with HTML5 Drag-and-Drop Functionality - HTML5 Links III)HTML5 for ...

    recorder.js 基于Html5录音功能的实现

    所涉及的API:WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL 兼容性 Chrome、FF、Edge、QQ、360(注:目前IE和Safari全版本不兼容) 其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持 请尝试使用FF、...

    HTML5音视频采集demo

    Video.js - 提供用户界面的HTML5媒体播放器。 webrtc-adapter - 为此插件中使用的getUserMedia和其他浏览器API提供跨浏览器支持。 录制音频和/或视频时,您还需要: RecordRTC.js - 增加对音频/视频/ GIF录制的支持...

    Beginning HTML5 Media

    Beginning HTML5 Media, Second Edition is a comprehensive introduction to HTML5 video and audio. The HTML5 video standard enables browsers to support audio and video elements natively. This makes it ...

    HTML5高级程序设计

    3.2 使用html5 audio和video api 56 3.2.1 浏览器支持性检测 57 3.2.2 理解媒体元素 58 3.2.3 使用audio元素 62 3.2.4 使用video元素 63 3.2.5 进阶功能 68 3.3 小结 70 第4章 geolocation api 72 4.1 位置...

    音高移位器 - HTML5视频音频FX「Pitch shifter - HTML5 Video audio FX」-crx插件

    在任何网页(例如YouTube)上移动HTML5视频中的音频 #现在固定! #音高在不更改播放速率的情况下(除非您希望)将页面上HTML5视频源的音频转移。 潜在的用例:修正过于抱怨的youtuber的声音。 撒旦版本的最爱影片...

    完整版《HTML5高级程序设计》5

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    完整版《HTML5高级程序设计》2

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    完整版《HTML5高级程序设计》4

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    HTML5 Multimedia DEVELOP AND DESIGN

    Using Audio: How to add audio to web documents using the HTML5 audio element. Using Video: How to add video to web documents using the HTML5 video element. JavaScript API and Custom Controls: How...

    HTML5高级程序设计.part5

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    4.2 使用HTML5 Audio和Video API 78 4.2.1 浏览器支持性检测 79 4.2.2 可访问性 79 4.2.3 理解媒体元素 80 4.2.4 使用audio元素 85 4.2.5 使用video元素 86 4.2.6 进阶功能 93 4.3 小结 95 第5章 ...

    完整版《HTML5高级程序设计》3

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    HTML5高级程序设计.part4

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    HTML5高级程序设计.part1

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    HTML5高级程序设计.part2

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

Global site tag (gtag.js) - Google Analytics