-
等级
本版专家分：0结帖率 57.14% -
h5移动端（安卓和ios），video可以实现自动播放,autoplay不行，求源码，谢谢展开阅读全文
-
等级
本版专家分：161816勋章
-
- 签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
进士
2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
-
- 银牌 2019年1月 总版技术专家分月排行榜第二
-
-
移动端的浏览器为了避免浪费用户的网络流量，默认是不允许媒体文件自动播放的。
用代码是无法解决。除非用户自己对浏览器进行设置。
-
等级
本版专家分：0
-
可以加个触发事件去实现吗
-
等级
本版专家分：161816勋章
-
- 签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
进士
2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
-
- 银牌 2019年1月 总版技术专家分月排行榜第二
-
-
可以，但只能是click事件
-
等级
本版专家分：0
-
可以贴下源码吗？点击一个按钮，就可以弹窗自动播放视频
-
等级
本版专家分：161816勋章
-
- 签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
进士
2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
-
- 银牌 2019年1月 总版技术专家分月排行榜第二
-
-
<video id="videoid" src="xxxxxxxxxxxxx"></video>
<input type="button" value="播放" onclick="play();" />
<script type="text/javascript">
function play() {
document.getElementById("videoid").play();
}
</script>
-
等级
本版专家分：0
-
这种方法不行欸，在移动端安卓手机上不能自动播放
-
等级
本版专家分：0
-
$(".arrow-curcle").click(function(){
/*播放器判断是安卓还是ios*/
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
/* alert("ios")*/
$(".arrow-curcle").hide();
$("#myvideo").play();
/*ios自动播放*/
$('.arrow-curcle').bind("myvideo", function(){
if ("wView" in window) {
window.wView.allowsInlineMediaPlayback = "YES";
window.wView.mediaPlaybackRequiresUserAction = "No";
}
});
$(this).trigger("myvideo");
}
else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
/* alert("Android")*/
$(".vd").show();
$('.arrow-curcle').bind('play',function () {
var Media= $("#vdAndroid");
Media.click(function() {
event.preventDefault();
Media[0].play();
});
}) ;
$(".arrow-curcle").trigger('play');
} else { };
});
我用的种方法也不行
-
等级
本版专家分：35
-
//音频，写法一
<audio src="http://blog.163.com/lzyi_117/music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
//音频，写法二
<audio controls="controls">
<source src="http://blog.163.com/lzyi_117/music/bg.ogg" type="audio/ogg"></source>
<source src="http://blog.163.com/lzyi_117/music/bg.mp3" type="audio/mpeg"></source>
优先播放音乐bg.ogg，不支持在播放bg.mp3
</audio>
//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
-
等级
本版专家分：21322勋章
-
- GitHub 绑定GitHub第三方账户获取
-
-
优秀版主
2015年8月优秀小版主
2015年5月优秀小版主
2015年4月html5优秀版主
-
- 蓝花 2015年7月 Web 开发大版内专家分月排行榜第三
-
-
等级
本版专家分：0
-
使用最新版的QQ浏览器（qqbrowser_8.7.0.4340_20820）可以实现自动播放视频功能
- video 移动端自动播放
bug: 在video标签内定义的属性autoplay，在ios或者android内的微信浏览器是不生效的； 利用微信的JSAPI 的WeiixinJSBridgeReady() //////////////////////////////////////////////////////////////////////////...
- video 经测试还不支持移动端自动播放的 vue-video-player也没办法
3. 说vue-video-player组件第一次总是不能自动播放的原因是，视频或音频的url赋值时必须使用this.playerOptions.src方法来进行切源，而不是this.playerOptions.sources[0].src。 (x) 3. 说vue-video...
- HTML5 video（PC和移动端）自动播放学习指北
自动播放的问题在工作中时常遇到，针对自动播放做了一下简单的总结。 二.自动播放 自动播放就是未经用户的允许，播放音频或视频的行为。 在HTML里，通过给video标签， audio标签设置autoplay的属性，或者通过JS...
- PC端、移动端Video自动播放兼容完美解决方案（IOS、安卓、微信端）
最近公司官网需要使用视频当做banner背景且自动播放，并且因为是官网需要做到PC端和移动端都可以适配自动播放兼容，这些问题很是头疼；得到这个需求后，开始查看各个大厂的移动端网站，发现很少有官网在移动端使用...
- 移动端H5 video视频播放优化实践
标签播放视频，要做到两个基本原则，速度快和体验佳，先来分析一下这两个问题。 下载速度 以一个8s短视频为例，wifi环境下提供的高清视频达到1000kbps，文件大小大约1MB；非wifi环境下提供的低码率视频是500kbps...
- 解决移动端中video点击视频播放会自动全屏
video标签中加几条属性x5-playsinline="" playsinline="" webkit-playsinline=""可以解决移动端video点击播放自动全屏问题
- 移动端video层级问题
移动端video标签层级问题，与video标签同级的元素无法盖住video标签，可以给video标签加个父元素让video标签的父元素的同级元素盖在video父元素上可以解决video标签上无法放内容的问题。可以在video上层加一些例如弹...
- Video在网页和移动端无法自动播放问题？?
<video>标签介绍 <video> 标签定义视频，比如电影片段或...//autoplay表示视频自动播放，controls表示显示视频控制器，loop表示循环播放 <video width="320" height="240" autoplay="autoplay" con...
- video — 移动端适配
最近做微信内H5分享页&...PC端视频自动播放，在video标签里加上“autoplay”属性即可；但该属性在移动端不兼容（移动端为了避免浪费用户的网络流量，默认不允许媒体文件自动播放）。 <vi...
- vue移动端使用video标签
vue移动端使用video标签
- HTML 5 Video标签如何取到第一帧
移动端页面加载出来的时候视频那一区域是黑色的，在播放之前，请问有什么方法可以让该视频的第一帧显示出来，谢谢！
- 完美解决移动端video视频层级问题
H5页面视频播放的问题相信曾经让很多同学崩溃，video标签的层级问题始终无法得到完美的解决方案。 这次的需求是这样的：在浏览器中扫码打开一个H5页面，要将一个视频当成背景图片来播放（gif太大，所以不用） 通过...
- 移动端在iOS上视频禁止全屏播放
移动端在iOS上视频禁止全屏播放：
- 手机web端页面加载时自动播放背景音乐
但是移动端不一样，移动端禁用所有的自动播放音乐，必须手动触发，但是我们可以巧妙绕过这个设定 1、在html上新建个容器，其实不要也可以，我只是喜欢规范点 2、用js加载页面时把video元素append进去就行了...
- video标签，在移动端获取第一帧作为展示
写在前面 video标签，获取第一帧作为poster。网上能找着很多案例，很容易实现，在pc端 效果明显。...使用自动播放，利用timeupdate 事件，让其停留在第一帧。 实现（vue） 特殊处理： 华为浏览器 无法自动播...
- h5 移动端 关于监测切换程序到后台或息屏事件和visibilitychange的使用
需求：当我们页面上正在播放视频或者播放背景音乐时，我们屏幕自动息屏或者切换程序去看消息时，我们希望暂停视频或背景音乐，回到程序我们希望继续播放视频或播放背景音乐。小程序上提供了 onUnload返回 onHide退出...
- vue-video-player 在移动端无法点击视频 暂停/播放 求帮助！！
PC是正常的，移动端就不行. ``` ``` <div class="video-container"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions...
- 使用H5video标签的android版微信视频无法自动播放
iphone5s能自动播放，小米2S，华为M7不能自动播放。 也试过 ``` setTimeout(myfunction(), 1000); function myfunction() { document.getElementById('VideoShow').load(); document.getElementById('...
- 总结移动端video视频播放的坑
移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮盖。后来这个问题在iOS下得到了解决，但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的...
- 利用H5实现RTMP流的WEB移动端直播
主要实现方式：使用H5的video 元素结合H5的网络频播放器（video.js）实现rtmp流的直播播放 video.js 介绍 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，...
- 关于微信H5自动播放视频-canvas实现逐帧动画效果加音频
项目需求 用户进入页面自动播放一段小视频 解决方案一 利用 JS reload 之后执行 video.play 和 video autoplay 都只能在WEB段实现, 但是到了移动端就执行不了 因为项目应用了微信的JS-SDK,所以只需要做兼容微信...
- js手机浏览器video标签会一直置顶，遮盖住弹出层问题
手机里面播放视频video时，可能有些需求会要求播放页面弹出遮罩层，来完成一些操作，但是弹出层会被video标签遮盖住，即使设置z-index为无限大也没有用，这个问题调试了好久，后来用的其它方法处理：就是弹出层的...
- H5 video标签在移动端，不默认全屏播放。
最近在做在h5 端播放视频时用video标签发现默认是全屏播放，查了一下资料加 了webkit-playsinline=“true”，ios7.XX 是不全屏播放的，但用ios10以上还是全屏播放，最后又加了一个属性playsinline=“true”，就全部...
- html5 video自动播放-Android、IOS video自动播放-移动端video自动播放
video webkit-playsinline playsinline x5-playsinline="" x-webkit-airplay="allow"class="vdo" controls="controls" src="xxx.mp4" autoplay="autoplay" id="video"></video> IOS处理方法 $(document)....
- 手机移动端浏览器 HTML 音乐不能自动播放的三种方法
第一种：添加控制属性（controls） <audio autoplay="autopaly" loop="loop" controls="controls" id="audios"> <source src="music/bg.mp3" type="audio/mp3...第二种：自定义Func实现交互触发play() v...
- html5 video 部分安卓机自带浏览器会自动全屏而且视频是永远在最上层 设置z-index无效
最近有个移动端视频全屏的项目 视频要求全屏播放的 视频的上层有文字内容 但是魅族 小米（目前发现这两个）手机的自带浏览器视频直接把他覆盖在文字的上面设置z-index也无法处理 这个有什么办法可以处理 让视频去...
- css3 移动端页面全屏旋转，横屏显示。
css3旋转模拟手机横屏。 当手机不能自动旋转时，或有特殊需求。用css3 transform，实现横屏展示。
- html5--移动端视频video的android兼容，去除播放控件、全屏等
但之前的故宫穿越H5，和吴亦凡入伍H5，利用的视频技术，貌似又给人一种新面貌。前段时间做某项目，恰好也是一个类似视频全屏的，下面跟大家分享下经历的坑和填坑的办法。ios端问题其实没什么，基本都在android端，...
- 解决手机微信浏览器视频自动播放和默认全屏问题
1.早期因为带宽和流量的因素，移动端浏览器禁止视频自动播放，现在现在流量便宜了、手机硬件越来越好了，部分可支持了2.在移动端浏览器， video 在用户点击播放或者通过API video.play() 触发播放时，会强制以全屏...