x5内核，video标签点击播放不自动全屏

最新推荐文章于 2024-09-23 16:43:17 发布

flym_

最新推荐文章于 2024-09-23 16:43:17 发布

阅读量1.7k

点赞数

分类专栏：方法文章标签： H5 video JavaScript html5

本文链接：https://blog.youkuaiyun.com/u014689760/article/details/89716002

版权

方法专栏收录该内容

8 篇文章

订阅专栏

在点击video播放时，不让它全屏显示播放？

	<video id="video" src="" 
	controls autoplay muted x5-playsinline="" playsinline="" webkit-playsinline="" x-webkit-airplay="allow" preload="auto"
	x5-video-player-fullscreen="true" /*设置为 true 是防止横屏*/ 
	 ></video>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

flym_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

移动端使用X5 内核 html自动播放视频

码可菠萝的博客

09-25

1万+

1.首先集成配置X5内核1. 集成SDK下载链接： https://x5.tencent.com/tbs/sdk.html如果是Android Studio用户将相应的jar包放在 jniLibs 文件夹下，如果是Eclipse用户，放在libs文件夹下即可。x5暂时不提供64位so文件，为了保证64位手机能正常加载x5内核，如果使用是Eclipse则需要将所有的.so文件都放置在so加载目录：

vue-video-player 点击播放自动全屏及安卓端样式兼容问题

qq_42859450的博客

01-07

3941

<template> <div class="w100 bgf pl15 pr15 borBox pt10 pb20 helpProjectDeatil"> <p class="color3AF pt18 fz20" style="color: #000000"> {{ deatilData.title }} </p> <div> <div class="flex alic justs...

参与评论您还未登录，请先登录后发表或查看评论

腾讯x5无法全屏播放视频

丿灬安之若死

02-20

1195

之前是用的Context 现在改为Activity之后就可以点击全屏了更多高级用法可以参考官方文档：https://x5.tencent.com/tbs/technical.html#/detail/sdk/1/a1f54118-e2b7-43df-8189-8824e4ce5970 参考博客：https://www.jianshu.com/p/ac803bba5db2 ...

uniapp微信小程序 Video标签，视频全屏不生效

weixin_44768151的博客

09-23

474

在微信开发者工具调试版上面不生效，一定要用真机调试全屏功能才生效。

js之 H5 的 video 标签全屏功能不能用

yan263364的博客

10-16

4999

一、问题 H5 的 video 标签全屏功能不能用。二、经过刚开始以为 video 标签全屏功能默认没有开的。后来发现，全屏功能在本地是好使的，服务端就打不开。因为现在这个项目，是嵌套在一个项目的 iframe 页面。三、结果在 iframe 标签里面添加 ...

【终极版】微信Android X5内核播放视频全屏的解决方法

微巴特WeiBut的博客

01-07

5115

最近在做视频直播系统，发现在微信浏览器上播放视频会直接弹出至顶层全屏方式播放，但只有在安卓才有这个问题，内核会劫持video标签，然后调用播放器进行全屏播放，播放完后还会弹出一些其他视频广告。当然因为微信浏览器在安卓上使用的QQ浏览器X5内核。IOS则是使用的苹果自己的内核safari，自然不会出现乱七八糟的问题，我有一句****不知***** 当然也可以使用X5内核调试页关闭X5内核可以解决问...

vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

10-15

在本文中，我们将深入探讨如何使用vue-video-player组件在微信环境中解决自动全屏播放以及横竖屏导致的样式错乱问题。vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如...

Android webview当腾讯x5内核首次下载未完成时视频全屏/横竖屏播放卡死的问题

kururunga的博客

03-19

1364

最近浏览器一直报出这样几个问题： 1.信息中心中访问百度地图网页版，无法定位到当前位置 2.浏览器全屏播放卡死，多次点击闪退我用的webview是腾讯的x5 webview，一直以为很稳定，其实这个内核是需要下载的，可以设置在wifi或者手机流量上下载，然而在测试环境下，下载速度感人，可能下载失败，就需要重新下载。而测试刚刷机联网进去全局搜索，然后二级页面跳浏览器，此时内核大概率是没有下载成功替换的，而且，就算你是直接导入静态内核（操作有些麻烦，需要从微信下载内核，然后导出到电脑，然后把so库和\ass

html video标签全屏和安卓端点击屏幕不显示操作栏问题

昨天1990的专栏

01-23

6404

1全屏监听 document.addEventListener("webkitfullscreenchange", function (event,state) { that.video.isFullscreen = !that.video.isFullscreen;//在外部设置一个全局变量初始值赋值为false if(that.video.isFullscreen){//切

解决video标签在ios系统播放全屏的问题

fang5211的博客

12-21

1507

<video controls="controls" webkit-playsinline="true" playsinline="true" src=""></video> webkit-playsinline="true" playsinline="true" IOS之UIWebView加上allowsInlineMediaPlayback属性为YESwebview.allowsInlineMediaPlayback=YES;

x5-fullscreen_HTML5 FullScreen API简介

cungui5726的博客

08-21

831

x5-fullscreenRight now Apple, Microsoft, Google and Mozilla are pushing towards “flat” design by slimming down the visual clutter of their applications. Despite this minimalist trend, it is unavoidabl...

解决video更多选项按钮点击无反应以及操控video标签的控制按钮

Mine____的博客

05-07

5146

在一个项目中使用原生video时，点击右下侧更多按钮时无反应，找了很多文章没有发现类似问题的解决方案后面就想把更多按钮隐藏掉，但是只能找到隐藏全屏按钮和画中画的隐藏方式后面找到了可以通过shadow DOM 看到被隐藏的 DOM ，发现更多选项按钮其实是被点击了，但是弹出的菜单定位发生了问题，导致无法看到，如下图把bottom改为0，更多选项的菜单就会出现，但是我没有找到修改样式的方法，只能去掉视频的下载和画中画功能，让更多选项按钮消失下面是其他按钮的样式操作以及shadow DOM s

video在微信和QQ浏览器中不全屏播放解决

weixin_33940102的博客

03-30

1227

最近公司做一个视频活动的HTML5页面，页面并不复杂，但是要求视频播放的时候不全屏。在网上看到好论坛类似的基本问题，以前有申请白名单的，在白名单的视频链接或者腾讯旗下的视频链接是原生播放，否则安卓会被劫持成腾讯家的播放器播放并且默认全屏，目前通过白名单的方法是解决不了的。还好终于找到了解决办法，下面好好整理一下。在video标签中加属性...

记一个video处理全屏的问题

搬砖小白灿哥哥

08-08

709

在微信浏览器里面使用video标签，会自动变成全屏，改成下面就好了，起码可以在video标签之上加入其他元素。 video id="videoID"webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"x5-video-player-type="h5"x5-video-player-fullscreen="

移动端关于video标签视频全屏播放的兼容适配问题

linxner的博客

02-15

9324

之前做一个项目，需要在两个大屏之间加一屏的视频，效果类似三屏竖方向的翻页，只是中间是一个视频，本以为如此简单三两下搞定。没想到。。。原因在于，IOS与Android对video标签的支持不同，在IOS运行的好好的，放到Android中就各种问题。一般video标签长这样： <video id="start_video" class="start_v...

视频标签 video的一些特殊属性详解

m0_46349605的博客

12-01

3573

视频标签 video的一些特殊属性详解 HTML5标签video在PC上显示很简单，就一个标签加资源，很少需要关心其它属性。但放到移动设备上，video的标准，Android和iOS有很多区别，另外还有很多各家浏览器特定的属性，本文详细讲了video在移动端的实践。 video的属性 <video id="video" src="video.mp4" controls = "true" poster="images.jpg" /*视频封面*/ preload="auto"

X5内核浏览器video自动全屏解决办法

最新发布

03-19

### 微信 H5 Video 标签自动播放解决方案在微信环境中，H5页面中的`<video>`标签默认情况下无法实现自动播放功能。这是由于微信浏览器的安全策略限制所致[^1]。以下是几种可行的解决方案： #### 方法一：监听 WeixinJSBridgeReady 事件通过监听 `WeixinJSBridgeReady` 事件来触发视频的自动播放行为。此方法适用于 iOS 和部分 Android 设备。 ```javascript document.addEventListener('WeixinJSBridgeReady', function () { const videoElement = document.querySelector('video'); if (videoElement) { videoElement.play().catch(() => { console.error('Auto play failed.'); }); } }, false); ``` 这种方法利用了微信内置 JS Bridge 的初始化完成信号，在桥接加载完成后尝试调用视频的 `play()` 方法。 --- #### 方法二：用户交互触发动态播放对于某些设备或场景下仍然无法自动播放的情况，可以通过用户的显式操作（如点击、触摸等）动态启动视频播放。这种方式可以规避大部分浏览器的安全限制。 ```html <button id="start-video">Start Video</button> <video id="myVideo" src="example.mp4"></video> <script> document.getElementById('start-video').addEventListener('click', function () { const videoElement = document.getElementById('myVideo'); videoElement.play(); }); </script> ``` 上述代码片段展示了如何通过按钮点击事件手动控制视频播放的行为[^3]。 --- #### 方法三：静音模式下的自动播放许多现代浏览器允许在设置为静音的情况下启用 `<video>` 元素的自动播放功能。因此可以在 HTML 中添加 `muted` 属性并配合 `autoplay` 使用。 ```html <video autoplay muted loop playsinline src="example.mp4"></video> ``` 需要注意的是，即使设置了 `muted` 和 `autoplay`，仍可能因平台差异而失效。此时建议结合 JavaScript 显式调用 `play()` 方法以增强兼容性。 --- #### 方法四：处理 X5 浏览器全屏劫持问题针对 Android 平台上的 X5 内核浏览器可能会强制将 `<video>` 标签切换至全屏模式的问题，可通过以下手段缓解： - **禁用全屏模式**：在 `<video>` 标签中加入 `webkit-playsinline` 或者标准化后的 `playsinline` 属性。 ```html <video autoplay muted playsinline webkit-playsinline src="example.mp4"></video> ``` - **隐藏原生控件**：通过 CSS 隐藏掉不必要的 UI 控制条，从而减少干扰体验。 ```css video::-internal-media-controls-overlay-cast-button { display: none; } video::cue { color: white; background-color: black; } ``` 这些调整能够有效降低被腾讯播放器接管的风险[^2]。 --- ### 总结综合以上分析可知，解决微信 H5 页面中 `<video>` 标签无法自动播放的核心在于合理运用 API 调整以及适配不同终端特性。具体实施时可根据实际需求选取合适的组合方案。