H5学习系列之Audio和Video

1、视频文件:音频轨道、视频轨道和一些元数据(视频封面、标题、子标题、字幕等相关信息)。

2、目前H5还不支持的:流式音频和视频(H5对视频的支持只限于加载的全部媒体文件)、H5的媒体收到跨域资源共享的限制、全屏无法通过脚本控制。

3、检测浏览器是否具有播放视频的功能

var canPlay = document.createElement("video").canPlayType;
if (canPlay) {alert("ok");}
else {alert(‘error‘);}  //其实就是检测浏览器是否具有canplaytype函数

4、audio

<audio controls src="/张含韵 - 问别.mp3">
An audio clip from johann sebastian bach
</audio>

代码中controls 特性告诉浏览器显示通过的用户控制(开始、停止、跳播、以及音量控制),她之间的内容是为不支持audio元素的浏览器准备的替换内容

<audio controls >
An audio clip from johann sebastian bach
</audio>

时间: 2024-10-12 23:40:10

H5学习系列之Audio和Video的相关文章

那是我在夕阳下的奔跑:边跑边学习html5之audio与video

今天为大家分享一下html5中的视频(video)与音频(audio).在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史. 1.前言 Flash被退休与html5的上位 Flash这项技术诞生于20多年前,曾被应用于98%的个人电脑上,是开发者最青睐的软件之一,被用于开发游戏.视频播放器和可在多个网络浏览器上运行的应用.Falsh的前半生可以说是辉煌的,在Flash最为鼎盛的时期,来自Adobe的官方统计,全球有将近200万的Flash开发者. 但它仅仅是满足了人

H5学习系列之文件读取API--本文转自http://blog.csdn.net/jackfrued/article/details/8967667

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { alert("Not sup

h5 audio 和 video

html5音频和视频的用法 音频标签audio和视频标签video用法和其他html标签一样,如: <audio controls src="johann_sebastian_bach_air.mp3"></audio> 但是由于各个浏览器支持的编解码器不一样,所以可以配合source来兼容,如: <video controls> <source src="Intermission-Walk-in.ogv"></

Html5学习系列

Html5学习系列 HTML5 规定了一种通过 video 元素来包含视频的标准方法 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 如需在 HTML5 中显示视频,您所有需要的是: <video src="movie.ogg" controls="controls&q

【深度学习系列4】深度学习及并行化实现概述

[深度学习系列4]深度学习及并行化实现概述 摘要: 深度学习可以完成需要高度抽象特征的人工智能任务,如语音识别.图像识别和检索.自然语言理解等.深层模型是包含多个隐藏层的人工神经网络,多层非线性结构使其具备强大的特征表达能力和对复杂任务建模能力.训练深层模型是长期以来的难题,近年来以层次化.逐层初始化为代表的一系列方法的提出给训练深层模型带来了希望,并在多个应用领域获得了成功.深层模型的并行化框架和训练加速方法是深度学习走向实用的重要基石,已有多个针对不同深度模型的开源实现,Google.Fac

Deep Learning(深度学习)学习系列之(八)

Deep Learning(深度学习)学习笔记整理系列 声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明也参考原文献. 2)本文仅供学术交流,非商用.所以每一部分具体的参考资料并没有详细对应.如果某部分不小心侵犯了大家的利益,还望海涵,并联系博主删除. 3)本人才疏学浅,整理总结的时候难免出错,还望各位前辈不吝指正,谢谢. 4)阅读本文需要机器学习.计算机视觉.神经网络等等基础(如果没有也没关系了,没

Wechat 微信端正确播放audio、video的姿势

在开发微信项目时,有在项目中播放音频(audio)和视频(video)的需求: 在开发中,我们会遇到的问题 audio.video在Android和IOS系统上的兼容性: video播放完成后,跳出浏览器广告(audio不存在): 对应的解决方案 html代码: <audio id="audio" src="http://q.letwx.com/app/touchtotouch-build/resource/happy.mp3" loop="loop

Android学习系列(17)--App列表之圆角ListView(续)

http://www.cnblogs.com/qianxudetianxia/archive/2011/09/19/2068760.html 本来这篇文章想并到上篇Android学习系列(16)--App列表之圆角ListView中的,但是若是如此就让大家错过一篇新的好的文章,着实可惜.上篇中我们使用shape,corners,gradient实现了一个渐变的圆角效果,但是在完文之后的实践中,我发现有时效果不甚满意,选中和放手的事件监听没有去正确的判断,然后渐变效果也比较单一,性能也觉得不是很快

ASP.NET MVC学习系列(二)-WebAPI请求

继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现: 请求的后台Action方法仍为上篇文章中的GetU