视频播放--自动播放
关于自动播放
autoPlay 布尔属性;指定后,视频会马上自动开始播放,不会停下来等着数据载入结束。
IOS
- 无音频源的 video 元素 允许自动播放
- 禁音的 video 元素允许自动播放
- 如果 video 元素在没有用户手势下有了音频源或者变成非禁音,会暂停播放
- video 元素屏幕可见才开始播放
- video元素不可见后停止播放
Android
安卓的 chrome 53 后放宽了自动播放策略,策略不同于IOS的Safari,需要同时对 video 设置 autoplay
和 muted
(是否禁音),才允许自动播放; 安卓的 FireFox 和 UC 浏览器
支持任何情况下的自动播放; 安卓的其他浏览器暂时不清楚情况;
Safari 浏览器
Safari 10
后带音频的视频和音频默认禁止自动播放,更多信息可以参考这篇文章;
Chrome 浏览器
禁音的视频依旧可以播放,带声音的视频会根据媒体参与指数来决定能否自动播放,那什么是媒体参与指数?官方给了解释和相关的维度:
MEI 是一个评估用户对于当前站点的媒体参与程度的指数,它取决于下面几个维度:
- 用户在媒体上停留时间超过了
- 7秒以上音频必须是展示出来,并且没有静音与
- video 之间有过交互
- 媒体的尺寸不小于 200x140.
检测能否自动播放?
var promise = document.querySelector('video').play();if (promise !== undefined) {promise.catch(error => {// Auto-play was prevented// Show a UI element to let the user manually start playback}).then(() => {// Auto-play started});
}
复制代码
为什么 IOS 下微信和钉钉可以自动播放带声音的视频?
确实发现在微信经常能看到自动播放的H5,但是作者自己写的设置了 autoplay、playsInline 的视频播放样例,在微信上依旧无法自动播放,而在钉钉上却可以自动播放
系统-浏览器带声音不带声音IOS 钉钉支持支持IOS Safari禁止自动播放IOS 微信禁止禁止
通过查询资料,IOS WebAPP 开发都是基于 IOS 提供的浏览器内核进行开发的,所以在 WebAPP 的 webview 中可以修改自动播放的表现,钉钉明显是支持自动播放,微信则是禁止自动播放,但是提供了内置事件来支持自动播放:
微信下通过 WeixinJSBridgeReady 事件进行自动播放:
document.addEventListener('WeixinJSBridgeReady',function() {video.play();},false
);
复制代码
原文地址:github.com/ProtoTeam/b…
追加内容
微信H5自动播放音频
yinyue('Fireworks')function yinyue(d) {var b = document.getElementById(d);var c = function c() {b.play();document.removeEventListener("touchstart", c, false);};b.play();document.addEventListener("WeixinJSBridgeReady", function () {c();}, false);document.addEventListener("YixinJSBridgeReady", function () {c();}, false);document.addEventListener("touchstart", c, false);}
复制代码
转载于:https://juejin.im/post/5c80e2bc6fb9a049db73e9f8
视频播放--自动播放相关推荐
- vue 点击按钮弹出视频播放+自动播放问题
单纯点击弹出视频代码: <template><div><button @click="checkVideoFun()">点此观看完整视频< ...
- 仿抖音视频自动播放html,vue 仿抖音视频播放切换
一.第一部分html页面的准备 {{item.title}} {{item.introduction}} 二.数据说明部分 data() { let u = navigator.userAgent; ...
- vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频
1.背景 项目中有涉及视频播放的需求,并且UI设计了样式,与原生的视频video组件有差异,所以使用了vue-video-player插件,并对vue-video-player进行样式改造,自定义播放 ...
- html视频播放完自动跳转,在html5视频中跳转到currentTime后自动播放
我试图创建一个视频,该视频在点击按钮后跳转到视频后从视频中的某个点自动播放.我拥有它,以便视频跳到现场,但我无法弄清楚如何从那里自动播放.我是新来的JavaScript,我想可能有一个简单的解决方案, ...
- android ios 实时视频播放,vue 移动端视频自动播放兼容ios,安卓
安卓初始化自动播放 首先创建一个jsmpeg.js文件,代码源文件放在百度网盘了,请自行下载 百度网盘下载地址 链接: https://pan.baidu.com/s/1bDvyrEAulMy8aYe ...
- 腾讯视频怎么开启运营商网络自动播放
1.打开手机,点击[腾讯视频APP]; 腾讯视频怎么开启运营商网络自动播放 2.进入腾讯视频,点击右下角的[头像标志]; 腾讯视频怎么开启运营商网络自动播放 3.进入腾讯视频菜单,点击底部的[设置]; ...
- PP视频如何不允许WiFi下自动播放
PP视频如何不允许WiFi下自动播放呢?很多人都不会,下面小编来详细的讲解一下. PP视频如何不允许WiFi下自动播放 1.先打开手机,点击桌面上的PP视频. PP视频如何不允许WiFi下自动播放 2 ...
- Video在网页和移动端无法自动播放问题??
<video> 标签介绍 <video> 标签定义视频,比如电影片段或其他视频流.支持三种视频格式:MP4.WebM.Ogg.是H5的新标签,使用如下: //autoplay表 ...
- android自动播放mp3,audio标签移动端(微信)实现自动播放
此文可能对ios端适用,因为Android机型暂未发现无法播放情况. 应该是某些浏览器对一些标签进行了限制啥的,就像chrome对视频播放也进行了一些限制. 引入音乐文件 使用js // music自 ...
最新文章
- How Tomcat Works(十一)
- (接口)让僵冷的翅膀飞起来---从实例谈OOP、工厂模式和重构
- 相机成像与校正原理:将外部世界进行降维
- ActiveX组件及其注册 (轉)
- Spring常见问题
- 剑指offer(一):二维数组中的查找
- 星期、月份、序号和日期_10
- Chrome安装Vue.js devtool 4.1.4_0
- Git学习05 --分支管理02
- 计算机页面高度怎么设置方法,win10系统调节任务栏高度的设置技巧
- 单片机编程软件IAR和烧写软件SmartRF安装教程(超详细)
- 西门子博途v14 SP1 S7-1200之间的以太网双边通讯(两个S7-1200 在一个项目中)
- opencv实现摄像头的实时人脸识别
- 前端缓存方法实现—cookie/sessionStorage/localStorage
- java中加号_java中加号+的作用
- DSP之定时器理论笔记
- Android WIFI密码查看器实例(在获取Root权限下查看系统文件)
- 第三章 CSS 选择器的命名
- 有4个圆塔,圆心分别为(2,2)……今输入任一点坐标,求该点坐标建筑物高度。
- hud 1560 DNA sequence(IDA* 迭代加深搜索+估值函数)