备案控制台
学习
实践
活动
专区
工具
TVP
文章/答案/技术大牛
写文章

H5案例分享：微信视频播放全屏问题（转）

但这时候全屏是有播放控件的，无论你有没有设置control。 做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放。 x5-video-player-type：启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。 同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS。 至于为什么同层播放只对安卓开放，是因为安卓不能像ISO一样局域播放，默认的全屏会使得一些界面操作被阻拦，如果是全屏H5还好，但是做直播的话，诸如弹幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题 无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式 x5­-video­-player­-fullscreen：全屏设置。

3.4K30

视频H5 video最佳实践

做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放 x-webkit-airplay="allow" : 这个属性应该是使此视频支持ios的AirPlay : 启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。 同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS。 至于为什么同层播放只对安卓开放，是因为安卓不能像ISO一样局域播放，默认的全屏会使得一些界面操作被阻拦，如果是全屏H5还好，但是做直播的话，诸如弹幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题 无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式 x5­-video­-player­-fullscreen:全屏设置。

1.4K30
  • 广告
    关闭

    1元体验视频云点播

    11.11云上盛惠，云点播流量包首购0.01元起，新老同享点播流量包0.08元/GB起，更有点播存储包/点播转码包/点播审核时长包/闲时流量包等7.4折起础版 使用权+1年视频播放 License 使用权

    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    关于直播卖货系统平台在微信浏览器中音视频播放的问题

    ', {}, function (e) { video.play(); }); }, false); } video.play(); 3.android下的直播卖货系统视频同层播放问题 其实上面提到的`x5-playsinline`属性也能一部分解决这个问题，但在自定义视频样式等情况下会导致视频尺寸、样式等各种各样的问题，其实腾讯浏览器提供了同层播放的解决办法，文档请戳：【https: //x5.tencent.com/tbs/guide/video.html】 同层播放器的使用方式跟普通的video元素差别不大，只是需要加上两个X5的自定义属性：「x5-video-player-type x5-video-orientation="portrait" /> 属性说明： `x5-video-player-type="h5"` 声明启用同层H5播放器 `x5-video-player-fullscreen 对于直播类全屏视频，最好不要在最顶部放交互性元素 4.后台切出自动停止播放音乐 在微信中打开一个自动播放音乐的直播卖货系统H5页面，有一个容易忽略的问题，就是在不退出页面的情况下，后台切出微信时，页面的音乐仍在播放

    64120

    前端-video 标签沉浸式播放解决方案

    ，这种可以在Android手机的video上随意放置dom元素，IOS本身没有这个限制，另一种更为通用的方式是用微信x5内核的同层播放模式，这种模式有两种好处： 1、去除了右上角讨厌的”全屏”按钮 2、 真正实现了x5内核下的沉浸式播放，我们看到目前的实现在微信上还是带有浏览器的titleBar的 在x5内核的环境下实现同层播放很简单，只需要在video上添加这么两行属性： x5-video-player-type 同层播放模式下的效果 确实是真正意义上的沉浸式播放，如果你的app里面webview用的也是x5内核那么这个页面也能在app上达到同样的效果，但是这种同层播放依然有无法解决的问题，首先这个全屏模式会重新计算宽高 ，触发视口大小变化，也就是说用户视觉上会有一个视口变化的过程，其次，同层播放模式虽然没有了”全屏”按钮，但是左上角的按钮用于退出沉浸式全屏，右上角的按钮点开是分享，分享的内容不可定制，固定位当前页面的title +url的组合，如果你对页面的定制化要求比较高的话，我这里有一个备选的方案，那就是放弃同层播放模式，当然这个前提是你不需要在video页面上做一些交互操作，或者说你的域名处于微信白名单下，当我们在非沉浸式下又想要打到等比例缩放视频的效果

    1.1K40

    网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）

    x-webkit-airplay="allow" // 这个视频优先加载 preload="auto" // 启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性 同层播放别名也叫做沉浸式播放 x5-video-player-type="h5" // :全屏设置。 由于本质上播放的是DOM对象，因此，我们不仅可以播放图片DOM，还可以是有着丰富HTML结构的

    视频直播技术干货：一文读懂主流视频直播系统的推拉流架构、传输协议等

    这个时候就会遇到一个移动端播放器的老大难问题——同层播放。 同层播放问题：是指在移动端H5页面中，一些浏览器内核为了提升用户体验，将video标签被劫持替换为native播放器，导致其他元素无法覆盖于播放器之上。 首先在iOS系统中：正常情况下video标签会自动被全屏播放，但iOS10以上已经原生提供了video的同层属性，我们在video标签上增加playsinline/webkit-playsinline可以解决 X5也提供了一套同层的方案（该方案官方文档链接已无法打开），给video标签写入X5同层属性也可以在X5内核中实现内联播放。 不过X5的同层属性在各个X5版本中表现都不太一样（比如低版本X5中需要使用X5全屏播放模式才能保证MSE播放的视频同层生效），需要注意区分版本。

    63721

    月活跃用户达5.16亿的微博是如何实现跨平台稳定开发、快速迭代的？

    作为一个新开发模式，微博小程序的首要目标是在应用商店审核日益严格的背景下，为业务方提供快速上线以及快速变更的能力。 4.2.1 微博小程序 – 同层渲染 微博小程序基于浏览器进行渲染，自然也避免不了浏览器在一些特定场景下交互体验很差的问题，比如像文字输入的场景以及视频播放的场景。 结合下方视频案例来进行说明，通过视频可以看到上半部分是H5播放器，下半部分是原生播放器，同样的视频在同样的网络环境下播放，不难发现由于H5播放器加载慢导致整体播放进度落后于原生播放器，而且在原生播放器中还有弹幕及加关注的交互组件 ，这些都是H5播放器不具备的。 因此，在特定场景下将浏览器控件替换成原生控件，可以大幅度提升小程序交互体验。 视频 要如何实现控件替换呢？

    37830

    同层渲染

    （特别是对于音视频播放器而言），又因为减少了客户端代码与 WebView 通信的流程，降低了通信开销，简单来说，原生组件功能全、速度快、开销少； 应用及概念 任何技术的产生都是伴随着需求或问题，那么同层渲染的产生到底是解决什么问题呢 未同层渲染的层级图如下图所示： 未同层渲染的层级 那么为了解决这个问题，便出来了同层渲染。 同层渲染的层级图如下图所示： 同层渲染的层级 最后上一下淘系前端团队对于同层渲染的定义： 同层渲染是允许将 Native 组件和 WebView DOM 元素混合在一起进行渲染的技术，能够保证 Native H5 组件，在客户端有 SDK 支持下显示成原生组件，做到无缝切换； ... 具体Demo示例可见SameLayerRender[1] 效果对比 对比图 相关链接 小程序同层渲染原理剖析[2] 【走进小程序原理】揭秘组件同层渲染[3] 亿级用户高稳定性视频播放器养成计划|618

    37221

    实时视频直播客户端技术盘点：Native、HTML5、WebRTC、微信小程序

    微信小程序在去年 12 月宣布开放实时音视频能力，再加上去年 6 月苹果宣布即将支持 WebRTC，业内一下子千树万树梨花开，前途一片光明。 使用这三种协议都是通过浏览器 H5 中的播放器来播放的。在多主播连麦互动的场景中，一个播放器里面只能播一路视频流，三个主播就得三个播放器，因此看不到多个主播同框连麦互动的情形。 如果要看到多个主播同框互动的画面，就必须把多路流混合成一路流，在单个播放器里面播放。 另外，浏览器 H5 的源代码是开放的。如果在浏览器上把音视频终端引擎实现了，相当于对外公开了所有核心的源代码。 在浏览器 H5 中也可以通过 websocket 来传输，用 jsmpeg 来播放，视频编解码的格式用 mpeg1。 mpeg1 是一个比较老的媒体格式，所有浏览器都支持。 在Windows下的简明编译教程》 《网页端实时音视频技术WebRTC：看起来很美，但离生产应用还有多少坑要填？》

    2.9K10

    流媒体服务器（11）—— 云点播播放器方案调研实录

    接下来，深入对比分析一下三者在这个项目中的优劣。先说安全性，三家的差别不大，无论是存储时还是播放时，都具备一定的安全策略和安全认证。 先说华为云，它是首先被pass的，因为该项目的后台管理服务是基于 BS 模式的，而华为云视频点播服务目前仅提供安卓、iOS 版本的播放器，没有对应 Web 的 H5 版本的播放器。 开源代码接下来，主要针对云点播的 Web H5 超级播放器进行介绍，播放器 demo 截图如下： 打开“开发者模式”，我们可以看到对应的网络请求，视频文件的播放地址是两层 m3u8 嵌套方式，第一层 m3u8 同样，在“开发者模式”下，我们也可以拿到这个播放器 demo 的源代码： 腾讯云视频点播示例 html,body{ margin: 0; padding: 0; } .tcplayer { margin 超级播放器 Adapter 和 超级播放器对比下面说一说云点播的 H5 超级播放器 Adapter，它比 H5 超级播放器具备更加灵活的 API 接口，下面是二者的对比表格： 播放器类别 功能 特点 自定义程度

    76021

    网络IP摄像头RTSP协议安防视频平台EasyNVR演示模式下rtsp地址无法播放原因分析

    TSINGSEE青犀视频云边端架构中很多产品由于开发架构类似，因此功能的实现过程或者出现的问题等都有类似的地方。 比如我们先测试了EasyGBS演示模式下视频播放的问题，随后就发现了EasyNVR视频平台也出现了同样类似的问题。 ? EasyNVR演示模式下获取到的RTSP地址无法播放，演示模式是之前添加的新功能，主要是为了实现在演示模式下，播放几分钟后（这个几分钟可以在配置文件配置的）断流，让这个流不能在播放。 目前EasyNVR对外提供的流有这几种格式的：WS-FLV、HTTP-FLV、HLS、RTMP、RTSP，其中前4种格式都是可以播放的，只有RTSP流地址比较特殊，该流地址后不能添加标识符，不然不能播放

    44530

    走进安卓的重灾区----video

    因此做兼容的时候可以设一个判断是否首次播放的标志来处理。 默认样式 安卓下，不能自动播放，因此视频在播放前会带有视频的默认白色加圆圈播放按钮且背景是纯黑色，可以说是非常丑陋了。 那么问题来了，如果页面上不只有视频，还有其他内容呢，例如视频是在一个弹出层中。这样设置的话，页面原有内容会有一个1s左右的非常明显拉伸过程，这个拉伸过程就是为全屏播放视频做准备的。 于是这种情况下，必须舍弃设置全屏播放了，但是在X5浏览器非全屏播放模式下，安卓会在视频页面右上角自动生成一个全屏按钮，这个怎么都去不掉。 若用户点击了进入全屏模式，视频播放完毕并不会停留在视频最后一帧，而是出现腾讯的一些视频推送，你懂的。这个时候退出了全屏播放的话，视频会自动隐藏，所以最好做一张视频底图，不然就尴尬了。 诡异的坑 安卓下，若是摇一摇在弹出层播放视频，若弹出层中有外链，点击了跳转，再返回，这个时候 video 会有一个诡异的bug，具体表现为返回后第一次能正常触发，第二次之后触发都直接播到视频最后一帧，设置

    95500

    视频H5Video标签在微信里的坑和技巧（转）

    统一播放效果 我们希望视频播放时可以全屏播放，没有进度条、播放按钮等与系统相关的元素，可以在视频上方增加自定义的元素（比如一个跳过按钮），类型下面的效果： ? 在 iOS 上，播放视频默认会弹出一个播放器全屏播放视频，如下效果 ? 播放器上下有的系统默认的控制栏，可以控制视频的播放进度、音量以及暂停或继续播放，播放视频时，视频会 “浮” 在页面上，页面上的所有元素都只能是在视频下面，这种效果显然不是我们想要的。 不过新版的 TBS 内核（>=036849）支持一个叫 同层播放器 的视频播放器，这个不需要申请白名单，只需给 video 设置两个属性 x5-video-player-type="h5" 和 x5-video-player-fullscreen TBS 有提供相应的事件，不过不同的版本有一点差异 TBS < 036849 036849 <= TBS < 036900 036900 <= TBS 是否支持同层播放器 否 是 是 退出全屏播放时触发

    1.8K20

    H5直播避坑指南

    | 导语 企鹅电竞项目，直播和视频播放是其中的核心。面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 ，这中情况下就适合直接选中video并调用video.play来播放视频 但是这种情况下也需要webview的支持，如在手Q下可以做到直接调用，在微信下因为不允许视频直接播放，则必须通过用户的真实操作来触发调用 页面内联播放问题 在iOS Safari和一些安卓的一些浏览器下播放视频的时候，不能在h5页面中播放视频，系统会自动接管视频 如果需要在h5页面内播放视频，需要在视频标签上加上 webkit-playsinline 视频的默认播放图标 在iOS下会有一个默认的播放图标，如图所示 ? 如果发现在x5内核下无法使用伪全屏而被浏览器接管，可以咨询下x5同事为你的域名开启白名单，不接管你域名下的视频播放 总结： 在经历过各种优化和调整后，我们可以在h5直播页做到看直播，看弹幕，发弹幕，发送礼物

    2K151
    点击加载更多

    关注

    腾讯云开发者公众号
    将获得
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 播放器 SDK

      播放器 SDK

      播放器 SDK 基于腾讯云强大的后台能力与 AI 技术，提供视频点播和直播的强大播放载体。流畅稳定的播放性能，集广告植入、数据监测等功能于一身。覆盖多类应用场景，满足客户多样需求，让客户轻松聚焦于业务发展本身，畅享极速高清播放新体验。

    相关资讯

    热门标签

    更多标签

    活动推荐

    腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2023 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 |京公网安备号11010802020287

    扫码关注腾讯云开发者

    领取腾讯云代金券