使用媒体标签最大的缺点在于缺少编解码器的支持
一、浏览器支持性检测
检测浏览器是否支持audio元素或video元素最简单的方式就是用脚本动态创建它,然后检测特定函数是否存在

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

这段脚本会动态创建一个video元素,然后检查canPlayType()函数是否存在。通过"!!"运算符将结果转换成布尔值,反映出是否创建成功,如果不成功的话就需要出发另一套脚本向页面中引入媒体标签,例如Flash等其他播放技术了。

也可以在audio和video元素中放入备选内容,如果浏览器不支持,他们就会显示在内容元素对应的位置,可以把以Flash插件方式播放同样的视频代码作为备选内容。

将Flash作为后备的video元素

<video src="video.webm" controls>
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="video.swf"/>
</object>
Your browser does not support HTML5 video.
</video>

如果只是想让不支持的浏览器显示一行内容就简单了

<video src="videw.webm" controls>
Your browser does not support HTML5 video.
</video>

二、媒体元素

HTML5中audio和video元素有很多相同之处,他们都支持播放、暂停、静音和消除静音、加载等。

controls告诉浏览器显示通用的用户控制,包括开始、停止、跳播以及音量控制,如果不指定controls,用户将无法播放网页上的音乐。

使用source元素,如果浏览器不支持特定的编解码器,那么就需要用到这个元素,他包含多个来源

<video src="" controls>
<source src="bach_air.ogg">
<source src="bach_air.mp3">
an audio clip from johann sebastion bach.
</video>

浏览器会按照声明顺序判断,如果支持的不止一种,那么浏览器会选择支持的第一个来源。(按照用户体验由高到底或浏览器)

自动播放--autoplay

ios不支持,会自动阻止

如果内置的控件不适应用户界面的布局,或者希望使用默认控件中没有的条件或者动作来控制音频或视频,可以借助内置的javascript函数和特性。

另外audio比vidio多了一些额外的特性

1、poster  在视频加载完成之前,代表视频内容的图片的URL地址,可以想想一下“电影海报”。该特性不仅可读,而且可以修改,一边更换图片

<video controls poster="/images/w3school.gif">   //类似于缩略图
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

2、width和height   读取或设置显示的尺寸。如果与视频大小不匹配,可能导致居中,上下或者左右出现黑色区域。

具有指定宽度和高度的视频
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

3、videoWidth

三、javascript函数和特性

方法:

load()   加载音频、视频文件,为播放做准备,通常情况下不必调用,除非是动态生成的元素,用来在播放前预加载。

play()  加载并播放音频、视频文件。

pause()  暂停

canPlayType(type)  方法浏览器是否能播放指定的音频/视频类型。

canPlayType(type)有一个特殊的用途,向动态创建的video元素中传入某段视频的MIME类型后,判断浏览器是否支持播放该类型的视频,而无需在浏览器窗口中显示任何内容

var hasVideo=!!(document.createElement('video').canPlayType('fooType'));   返回true或false

canPlayType() 方法可返回下列值之一:
●"probably" - 浏览器最可能支持该音频/视频类型
●"maybe" - 浏览器也许支持该音频/视频类型
●"" - (空字符串)浏览器不支持该音频/视频类型

所有浏览器都支持 canPlayType() 方法。

注释:Internet Explorer 8 以及更早版本不支持该方法。

参数

描述
type

规定要检测的音频/视频类型。

常用值:

  • video/ogg
  • video/mp4
  • video/webm
  • audio/mpeg
  • audio/ogg
  • audio/mp4

常用值,包括编解码器:

  • video/ogg; codecs="theora, vorbis"
  • video/mp4; codecs="avc1.4D401E, mp4a.40.2"
  • video/webm; codecs="vp8.0, vorbis"
  • audio/ogg; codecs="vorbis"
  • audio/mp4; codecs="mp4a.40.5"

注释:如果包含编解码器,则只能返回 "probably"。

媒体属性:

audioTracks            返回表示可用音轨的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置(以秒计)
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度(以秒计)
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
mediaGroup 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
src 设置或返回音频/视频元素的当前来源
startDate 返回表示当前时间偏移的 Date 对象
textTracks 返回表示可用文本轨道的 TextTrackList 对象
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
volume 设置或返回音频/视频的音量

媒体事件

abort             当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据,但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止

用addEventListener添加

例:添加play按钮控制音频

<audio id="clickSound" loop>
<source src="z.mp3" />
</audio>
<button id="toggle" onclick="toggleSound()">play</button>
<script>
function toggleSound(){
var clickSound=document.getElementById('clickSound'); //audio
var toggle=document.getElementById('toggle'); //按钮
if(clickSound.paused){
clickSound.play();
toggle.innerHTML="Pause";
}else{
clickSound.pause();
toggle.innerHTML="Play";
}
}
</script>

自己做的一个案例:

    <script>
$(function(){
var miya = {
changeClass: function (target,id) {
var className = $(target).attr('class');
var ids = document.getElementById(id);
(className == 'on')
? $(target).removeClass('on').addClass('off')
: $(target).removeClass('off').addClass('on');
(className == 'on')
? ids.pause()
: ids.play();
},
play:function(){
document.getElementById('media').play();
}
}
miya.play(); var img =new Image();
img.src = "http://img.miyabaobei.com/d1/p2/2016/03/11/4f/cb/4fcbf0d0bcf5165d2cd18a5ada001c36.jpg";
img.onload = function(){
miya.play();
} $('#audio-btn').on('click', function(){
var _this = this;
miya.changeClass(_this,'media');
}) })
</script>

H5音频和视频的更多相关文章

  1. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  2. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  3. H5内联视频总结

    概述 之前写过h5内联视频,总结了一下当时做微信视频类h5的心得,随着工作中越来越多的接触h5,我有了更多的心得与经验,记下来供以后开发时参考,相信对其他人也有用. 内联视频的播放 内联视频需要用户主 ...

  4. H5 video自定义视频控件

    1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  5. 20款jQuery 的音频和视频插件

    分享 20 款jQuery的音频和视频插件 Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器.可定制视频和 ...

  6. Windows Store App 音频和视频

    在Windows应用商店应用中提供了MediaElement控件,该控件能为应用提供音频和视频播放功能.就像之前提到的,虽然在多媒体应用开发中,开发人员可以自行开发一套音频.视频编解码规范和开发媒体播 ...

  7. HTML的音频和视频

    目录 [1]媒体格式 音频格式 视频格式 [2]元素 插件元素 HTML5元素 [3]HTML音频 [4]HTML视频 前面的话 多媒体元素(比如视频和音频)存储于媒体文件中,确定媒体类型的最常用的方 ...

  8. html5音频和视频标签

    在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...

  9. 使用HTML 5捕捉音频与视频信息

    长期以来,音频与视频信息的捕捉一直是Web开发中的一个难点.许多年来,我们一直依赖浏览器插件来实现这个需求. 在HTML 5中,出现了许多可以访问硬件设备的API,例如访问GPS设备的Geolocat ...

随机推荐

  1. 怎样看懂Oracle的执行计划

    怎样看懂Oracle的执行计划 一.什么是执行计划 An explain plan is a representation of the access path that is taken when ...

  2. fork()创建子进程

    fork()系统调用是Unix下以自身进程创建子进程的系统调用,一次调用,两次返回,如果返回是0,则是子进程,如果返回值>0,则是父进程(返回值是子进程的pid) 在fork()的调用处,整个父 ...

  3. 【原】iOS学习之极光推送

    一.极光推送工程端 1.下载SDK 极光推送是一个推送消息的第三方,SDK下载:https://www.jpush.cn/common/products 集成压缩包内容:包名为JPush-iOS-SD ...

  4. BZOJ2454 : TopCoder SRM 463 RabbitPuzzle

    每种状态最多只有三种后继状态:中间往左跳,中间往右跳,两边往中间跳. 如果把它们分别看成左儿子.右儿子.父亲的话,那么会得到一些二叉树. 取出起始状态和终止状态往上跳$k$步的所有状态,其他状态我们只 ...

  5. Intersection of Two Linked Lists

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  6. 利用OTP为odoo增强安全访问

    两次验证是广泛应用于各大站点的验证机制,我们今天利用Google Authentication来实现Odoo的两次验证,防止撞库或密码泄露等引起的安全问题. 1. 二次验证的原理 参见 http:// ...

  7. css实现水平垂直居中

    一.单行文字居中: height: 100px;height: 100px;overflow: hidden; 二.多行内容居中(容器的高度不能固定): padding-top: 24px;paddi ...

  8. Learn ZYNQ (7)

    矩阵相乘的例子 参考博客:http://blog.csdn.net/kkk584520/article/details/18812321 MatrixMultiply.c typedef int da ...

  9. C#.NET中数组、ArrayList和List三者的区别

    数组在C#.NET中是最早出现的,在内存中是顺序连续存储的,所以它的索引速度非常快,赋值与修改元素也很简单:但是,也正因为数组是顺序连续存储的,在两个数据间插入数据是很不方便的,而且在声明数组的时候必 ...

  10. python中matplotlib画折线图实例(坐标轴数字、字符串混搭及标题中文显示)

    最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指 ...