安卓微信视频播放全屏问题处理

2024-05-10 09:12:15

安卓全屏问题

视频全屏的H5专题十分收到业界喜欢, 虽然iOS下全屏自动播放并没有太大问题, 然而在安卓手机上，video组件全屏的时候会在顶层，好像"漂浮"在整个浏览器上面, 体验起来非常差. 除此之外, 即便采用JS给video设定为容器的宽高这方案, 也会出现难看的播放器控件,这时候不得不人为给视频底部加空白,在通过JS计算适合的高度以挡掉丑陋的播放器控件, 实在苦恼.

JSMpeg简介

偶然发现JSMpeg这个项目,能解决安卓全屏video漂浮问题问题.

它的原理就是JS解码视频, 用 WebGL & Canvas2D渲染出来,于是达到避免Video控件在安卓微信浏览器下产生的问题, 不过有一个需要说明的地方就是, 你需要用将你的视频文件(通常是mp4)转换成ts格式的视频文件, 并且 ,在iOS下的微信浏览器下, 使用jsmpeg播放ts文件, 是没有声音的. (iOS我们直接使用video+mp4的方式,也用不到这个插件).

你可以使用convertio.co/zh/mp4-ts/在线转换, 不过更推荐使用ffmpeg.org/,至于怎么安装就不再赘述.

生产ts视频文件命令：

    $ ffmpeg -i 你的源文件.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 输出文件.ts
复制代码

JSMpeg调用

    <canvas id = "canvas"></canvas><script>var player = new JSMpeg.Player('video.ts', {canvas: canvas, loop: false,autoplay:true});  </script>
复制代码

当然你也直接在HTML中使用

<div class="jsmpeg" data-url="video.ts" data-loop="false" data-autoplay="true">
</div>
复制代码

DEMO

点击这里体验Demo

或者直接扫描

本文来自thinkerchan.com

转载于:https://juejin.im/post/5b10d9e5e51d4506d62907c7

安卓微信视频播放全屏问题处理相关推荐

H5案例分享：微信视频播放全屏问题
2019独角兽企业重金招聘Python工程师标准>>> 微信视频播放全屏问题在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微 ...
android视频播放处理,安卓版微信视频播放全屏处理
问题在安卓版微信里,video在播放的时候,如果在没有做任何处理的情况下,微信会全屏播放你的视频,会严重影响一些例如直播之类的边看视频边交互的H5应用(注:在iOS里可以通过playsinline( ...
微信内置浏览器在使用video标签时（安卓）默认全屏的原因及解决办法
根据X5论坛得到的答案是:设计如此. 腾讯真是越来越嚣张了,一家独大后用户体验都不注重了(不给程序员留活路). 听说有个申请加入vdeo白名单的,域名验证后就可以解决默认全屏(反正我是没见过申请入口, ...
记一次微信H5全屏播放视频的总结
一.H5场景介绍需求:在微信里打开一个H5页面,然后点击按钮全屏播放视频,等视频播放完成后,在视频上显示一个跳转按钮,点击按钮跳转到其他的页面. 二.遇到的问题 1.IOS设备微信上,视频不能预加载 ...
H5微信播放全屏问题
在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会出现腾讯视频的广告推送等问题解决办法:给vi ...
HTML5微信播放全屏问题的解决方法
在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会出现腾讯视频的广告推送等问题解决办法:给vi ...
微信html 全屏显示,关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. 调用微信图片浏览器的函数 functio ...
微信视频全屏问题解决方案
1.微信浏览器下解决默认video全屏问题 ios:给video加一下属性 webkit-playsinline="true" playsinline="true&quo ...
谷歌（Chrome）浏览器视频播放全屏退出时死机
最近在使用谷歌浏览器看Flash视频的全屏,退出时视频电脑假死(视频声音还有,但画面一直定格在退出的时候).尝试使用Alt+F4关闭浏览器,毫无反应. 搜索谷歌最后查看到有2012年的一篇文章说是Fl ...
iOS视频播放全屏效果实现
概述最近在做有关音视频的项目,项目中涉及到全屏播放切换的问题,最近研究了一下.在此做个记录,实现全屏效果我目前能够用两种方法实现,一种是让App需要进行全屏的页面随着设备进行旋转,另外一种是把需要全 ...

最新文章

热门文章