![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
音频、视频
文章平均质量分 91
羽筠
这个作者很懒,什么都没留下…
展开
-
Howler.js HTML5声音引擎
Howler.js是一个不错的HTML5声音引擎。功能强大,性能不错,用起来也很方便。移动端的Safari和Chrome都禁止网页自动播放声音,必须通过用户的操作,touch, click等触发。Howler可以设置成自动捕捉用户操作激活(解禁)声音播放。支持很多声音格式以兼容各种浏览器。日常开发中,解决一些细节问题1. 苹果手机、安卓手机,自动播放的问题2. 播放延迟处理。使用 Howler.js 对于延迟处理效果比较不错原创 2023-10-20 18:44:11 · 1137 阅读 · 0 评论 -
音频、视频播放时属性、事件等操作
音频、视频 具有的方法/属性/事件(几个常用示例)<audio id="media" loop autoplay src="public/img/music.mp3"></audio><video id="media" webkit-playsinline="true" src="media.mp4" preload="au原创 2015-12-07 13:58:22 · 1932 阅读 · 0 评论 -
移动端ios直接设置currentTime无效解决方法
前段时间做过一个项目,每个页面设置了同一个背景音乐,但客户要求音乐从一个页面进入另一个页面后,要接着上一页面播放时间播放,所以进入新页面后设置currentTime为上个页面播放时间但ios系统直接设置无效,在判断音乐可播放时(canplay)再设置currentTime才可以,但在安卓设备上也这样判断设置则也无效,所以要根据不同系统设置,以下是针对ios、安卓系统设置的代码注:$myVi...原创 2018-03-06 17:38:30 · 8312 阅读 · 2 评论 -
安卓微信中播放视频终于可以不再自动全屏啦
最新的设置安卓视频不全屏播放(不知道是否全部安卓机型都支持)的方法前两天做了一个石头剪刀布的视频游戏项目,测试过程中找到了更加简便的方法,分享下,如下设置HTML代码:<video id="videoID" controls src="XXX" poster="XXX.jpg" preload="auto" x-webkit-airplay="true" x5-playsinline=&qu原创 2017-05-27 14:08:24 · 27718 阅读 · 9 评论 -
微信中的video属性设置
<video id="videoID" src="video.mp4" poster="loadbg.jpg" preload="auto" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="原创 2017-03-14 17:56:20 · 32993 阅读 · 0 评论 -
IOS自动播放音频/视频
ios 为了节省用户流量,对于 audio 和 video标签的 preload 和 autopaly 标签会自动拦截,除非用户手动点击交互才会执行 。对于背景音乐,又必须加载的时候就要执行,解决方法:(不过注意只能在微信浏览器里面打开) document.addEventListener("WeixinJSBridgeReady", function () { Weixin...原创 2015-12-21 16:59:36 · 4802 阅读 · 0 评论 -
未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,变形问题解决
当手机未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,会有拉伸,可以根据手机宽高比例判断横竖屏状态,来设置旋转视频元素,同时更新设置视频元素宽高(与之前状态的宽高值对调)demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X...原创 2018-12-27 15:36:16 · 2854 阅读 · 0 评论