博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
二、深度解析HTML5之视频播放和音频播放
阅读量:4885 次
发布时间:2019-06-11

本文共 748 字,大约阅读时间需要 2 分钟。

一:视频播放     

传统的视频音频播放是通过flash插件的形式完成,不是所有的浏览器都安装了flash插件,而且手机端不支持flash,这就导致视频和音频的播放会有很大的麻烦。

于是,HTML5增加音频和视频标签。

controls:添加控制面板

loop:设置循环播放

poster="":添加海报

preload:预加载

autoplay:视频自动播放

因为版权的缘故,同一个视频不可能得到所有浏览器的支持。所以引入了source标签,写在video,可以书写多个,浏览器会从上往下依次判断第一能播放的格式。

videoJS提供了几个API

方法:

play()    播放

pause()  暂停

属性:

paused   判断视频是否处于暂停状态。如果是暂停状态,返回true;否则,返回false

currentTime  返回视频播放的当前位置

duration   返回视频的总长

playbackRate  返回视频的当前速度,1表示正常速度

muted    如果设置为true,表示静音;否则,是不静音的

volume   表示视频的音量,最大为1,最小为0

代码:

 

 

 二:音频播放

音频标签是audio 

controls   显示控制面板

loop      允许循环播放

preload   预加载

autoplay   自动播放(当添加了autoplay的时候, preload是自动失效)

给音频添加控制面板

  

 

允许音频循环播放

 

 

让音频预加载

  

允许音频自动播放

 

由于版权的问题,没有一个格式是所有浏览器都支持的,所以我们需要加source标签。浏览器从上往下依次判断source的格式,找出第一个支持的格式进行播放。

 

 

转载于:https://www.cnblogs.com/my-freedom/p/5730388.html

你可能感兴趣的文章
OFDM仿真
查看>>
MySQL-ERROR 2003
查看>>
JavaScript内置对象
查看>>
ER图是啥?
查看>>
08.路由规则中定义参数
查看>>
Pandas截取列部分字符,并据此修改另一列的数据
查看>>
java.lang.IllegalArgumentException
查看>>
【Spark】编程实战之模拟SparkRPC原理实现自定义RPC
查看>>
接口实现观察者模式
查看>>
四则运算完结篇
查看>>
Objective-C中的类目,延展,协议
查看>>
Introduction Sockets to Programming in C using TCP/IP
查看>>
navigationController pop回之前控制器
查看>>
Web.config配置文件详解(新手必看)
查看>>
关于学习的一些感悟
查看>>
制作无广告启动盘
查看>>
python使用httplib2访问REST服务的例子
查看>>
经典代码(01)
查看>>
生成ico格式图标
查看>>
并查集hdu4424
查看>>