摘要:之前,在网页中实现音频和视频的播放功能需要借助第三方插件,如来实现。而在中,提供了和元素,使用起来更加方便。
Audio</>复制代码
HTML5之前,在网页中实现音频和视频的播放功能需要借助第三方插件,如Adobe Flash来实现。而在HTML5中,提供了audio和video元素,使用起来更加方便。
Audio元素
</>复制代码
方法一:
方法二:
music audio
创建Audio对象
</>复制代码
方法一:
var audio = new Audio();
方法二:
var audio = document.createElement("audio");
访问Audio对象
</>复制代码
var audio = document.getElementById("music-audio");
属性 | 描述 |
---|---|
duration | 音频的长度(以秒计) |
ended | 音频的播放是否已结束 |
error | 表示音频错误状态的 MediaError 对象 |
loop | 设置或返回音频是否应在结束时再次播放 |
paused | 设置或返回音频是否暂停 |
played | 返回表示音频已播放部分的 TimeRanges 对象 |
preload | 设置或返回音频的 preload 属性的值 |
volume | 设置或返回音频的音量 |
muted | 设置或返回是否关闭声音 |
方法 | 描述 |
---|---|
play() | 开始播放音频 |
pause() | 暂停当前播放的音频 |
</>复制代码
音频支持类型:.acc, .mp3, .ogg, .wav, .webm
preload 预加载
● auto - 当页面加载后载入整个音频
● metadata - 当页面加载后只载入元数据
● none - 当页面加载后不载入音频
Video
Video元素
</>复制代码
方法一:
方法二:
movie video
创建Video对象
</>复制代码
var video = document.createElement("video");
访问Video对象
</>复制代码
var video = document.getElementById("movie-video");
属性 | 描述 |
---|---|
width | 设置视频播放器的宽度 |
height | 设置视频播放器的高度 |
duration | 视频的长度(以秒计) |
ended | 视频的播放是否已结束 |
error | 表示视频错误状态的 MediaError 对象 |
loop | 设置或返回视频是否应在结束时再次播放 |
paused | 设置或返回视频是否暂停 |
played | 返回表示视频已播放部分的 TimeRanges 对象 |
preload | 设置或返回视频的 preload 属性的值 |
muted | 设置或返回是否关闭声音 |
poster | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像 |
方法 | 描述 |
---|---|
play() | 开始播放视频 |
pause() | 暂停当前播放的视频 |
</>复制代码
preload 预加载
● auto - 当页面加载后载入整个视频
● metadata - 当页面加载后只载入元数据
● none - 当页面加载后不载入视频
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50659.html
摘要:之前,在网页中实现音频和视频的播放功能需要借助第三方插件,如来实现。而在中,提供了和元素,使用起来更加方便。 HTML5之前,在网页中实现音频和视频的播放功能需要借助第三方插件,如Adobe Flash来实现。而在HTML5中,提供了audio和video元素,使用起来更加方便。 Audio Audio元素 方法一: music audio 方法二: music audio ...
摘要:初始化的过程上一篇其实并未完全分析完,这回接着来。层的函数中,最后还有的调用,走的是层的。结构体如下的和,以及,其余是状态及的内容。整个过程是个异步的过程,并不阻塞。至于的东西,都是在层创建并填充的。 初始化的过程上一篇其实并未完全分析完,这回接着来。java层的initPlayer函数中,最后还有native_setup的调用,走的是c层的IjkMediaPlayer_native_...
摘要:的兼容性问题,先来个五颜六色的图看看在哪里问题描述的安全机制,系统自带浏览器不能自动播放尝试方案回调中执行等定时器回调执行回调借用,如微信的监听事件,进行体验不好分析所以猜测如果限制引擎层判断是否是队列,中回调之类。。。 【1】audio autoplay的兼容性问题,先来个五颜六色的图看看Audio在哪里?showImg(https://segmentfault.com/img/bV...
阅读 1746·2021-10-13 09:39
阅读 2170·2021-09-07 10:20
阅读 2763·2019-08-30 15:56
阅读 3034·2019-08-30 15:56
阅读 1000·2019-08-30 15:55
阅读 743·2019-08-30 15:46
阅读 3561·2019-08-30 15:44
阅读 2633·2019-08-30 11:15
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要