android video隐藏中心显示播放按钮

最新推荐文章于 2024-10-14 14:05:20 发布
最新推荐文章于 2024-10-14 14:05:20 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： h5混合应用开发
本文链接：https://blog.csdn.net/sufubo/article/details/104065290
版权

使用默认的video标签的时候

video::-webkit-media-controls-overlay-play-button { //隐藏android端点击control中暂停按钮时视频中心出现的play icon
  display: none;
}

但是会引发安卓无法点击播放问题，需要自己写代码控制视频播放

移动端隐藏video默认play图标技巧
weixin_30709061的博客
03-21 1139
在video标签下，系统会默认显示内置的播放图标，美不美观另说，但在很大程度上，这个图标都难以和项目的整体风格保持一致。 查看文档，我们发现可以通过去掉controls属性去掉播放图标，但是如果你的项目需要适配移动端，你就会发现，这一属性失效了，无论如何，play图标都会突兀的显示在页面上。 那么到底该如何去掉这个图标呢？下面分享一种我认为可行的方法，欢迎大家一起分享交流。 简...
Android WebView H5视频播放实现全屏播放功能、全屏按钮不显示、灰显、点击无效问题解决方案
weixin_44158429的博客
04-18 8170
Android WebView H5视频播放实现全屏播放功能。问题全屏按钮不显示、灰显、点击无效解决方案。HTML5 Video Support。 1. 打开硬件加速(3.0以上版本支持) ，防止h5重新加载，切换横屏时，屏幕的H5内容始终以竖屏显示。 2. set一个WebChromClient，实现onShowCustomView() 方法和onHideCustomView()方法。 3. 全屏支持。
安卓浏览器中video组件会显示播放按钮
艾小逗
08-28 2005
安卓浏览器中video组件会显示大的播放按钮 *::-webkit-media-controls-start-playback-button{ display: none; -webkit-appearance: none; } *::-webkit-media-controls-panel{ display: none; -webkit-appearance: none; } *::-webkit-media-controls-play-button{ display: none;
video通过按钮控制视频播放
MollyL的博客
02-28 925
video通过按钮控制视频播放
android点击按钮看视频,Android 自定义View，仿微信视频播放按钮
weixin_32541907的博客
05-26 279
package com.lwd.playbutton;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphic...
Video标签上面覆盖播放按钮点击播放
热门推荐
老蔡学代码
11-29 2万+
最终效果： 自定义图片（背景不是poster）。覆盖到视频上，然后点击这个可以 播放。 HTML部分： <div class="video-box" > <video id="video" autoplay="autoplay" controls="controls" style="width:100%;height:510px"&gt
Android WebView 视频播放，全屏按钮不显示或灰显解决方案
NAME_CJF的博客
10-21 9878
Android WebView 视频播放，全屏按钮不显示或灰显解决方案背景问题定位 背景 在Android开发中，遇到了如下问题：Activity内嵌WebView，加载有视频的页面时，视频无法全屏播放。全屏按钮不显示或者灰显。 故记录一下此次问题解决过程。 问题定位 在Android官方文档上对问题所述场景有如下解释： 其大意为： 1. 要打开硬件加速 2. 设置 WebChromeCli...
python selenium 查找隐藏元素 自动播放视频功能
09-18
在上述示例代码中，我们不仅找到了隐藏的播放按钮，而且还模拟了点击操作，从而实现了自动播放视频的功能。这对于需要抓取视频内容的爬虫来说非常重要。通过模拟真实的用户行为，我们可以确保能够获取到完整的页面...
h5隐藏video控制按钮controls（腾讯云点播禁用video音量全屏等按钮）
jiajia199470的博客
12-27 1万+
前言 昨天app的同事（ios跟安卓）发现webview的video全屏按钮有问题，他们想禁用掉全屏、音量控制的按钮，前端同事A在根据api设置disable_full_screen=1（pc端falsh平台生效），但全屏按钮依旧存在，觉得腾讯api没做好坚持要换掉一直在用的腾讯云点播。个人觉得移动端采用video浏览器控件，换哪个云点播都一样，故帮忙解决禁用隐藏video内部controls功能...
android h5视频全屏,WebView篇——实现H5 Video标签视频全屏播放
weixin_42301008的博客
05-27 3395
Android原生API提供了WebView来加载H5网页，H5网页中可能使用Video标签实现视频播放，正常播放比较好实现，但是一般来说视频都会要求全屏播放，这怎么弄呢？下面就来实现一下。整体思路：点击Video标签全屏播放按钮时，会回调WebChromeClient的onShowCustomView()方法，退出全屏时会回调onHideCustomView()方法，所以思路就来了，onShow...
video标签的属性、播放按钮+右侧三个点儿等播放控件样式的隐藏、禁止点击右键行为
weixin_69924839的博客
10-14 2477
src ：视频路径 autoplay：自动播放 muted：视频静音播放.......
video 自定义视频播放控件
细节怪的博客
02-21 1万+
自定义视频播放控件，控件位置可随意放置
video增加中间播放按钮
zz_LXW的博客
04-23 2475
效果如下，点击播放再次点击暂停。
video 标签设置样式
zyf13671493506的博客
10-17 5288
设置video标签的默认样式 在这里插入图片描述 //全屏按钮 video::-webkit-media-controls-fullscreen-button { // display: none; } //播放按钮 video::-webkit-media-controls-play-button { } //进度条 ...
video播放视频，全屏按钮无法点击，变成了灰色
weixin_39725702的博客
01-25 1261
解决方案:为iframe添加allowfullscreen属性。
html video在手机上按钮位置问题,【前端】video在手机端封面有一个很大的播放按钮怎么去掉...
weixin_36219745的博客
06-04 1971
这个播放按钮怎么去掉好别扭啊回答`video::-webkit-media-controls-start-playback-button {display: none;}`不用video控件(controls)的时候，用如上方法取消，用控件的情况下加不带播放的poster，亲测可行~其实可以先隐藏video元素，然后用一个封面图代替，然后点击时候触发显示并播放。试试这个:video::-webki...
html5--移动端视频video的android兼容，去除播放控件、全屏等
weixin_34341229的博客
09-09 4278
android下html5的视频播放一直是前端兼容的重灾区，各种体验差，被诟病已久。但之前的故宫穿越H5，和吴亦凡入伍H5，利用的视频技术，貌似又给人一种新面貌。 前段时间做某项目，恰好也是一个类似视频全屏的，下面跟大家分享下经历的坑和填坑的办法。 ios端问题其实没什么，基本都在android端，基本每一个带有视频的项目都会遇到的，当然...
微信小程序 video标签 隐藏控件 神坑
一只快乐的小猴子的博客
04-06 2381
<video direction="0" src="" controls="{{false}}" objectFit="cover" autoplay show-fullscreen-btn="{{false}}" show-play-btn="{{false}}"...
react+video.js h5自定义视频暂停图标
mollerlala的博客
11-16 1483
注意：videojs升级后，不能用extend创建组件，需要按下方代码建一个组件。
android webview播放视频 移除下载按钮
最新发布
01-09
### 移除 Android WebView 中播放视频时显示的下载按钮 为了防止在 `WebView` 播放 HTML5 视频时出现下载按钮，可以采取以下措施： #### 修改 User-Agent 字符串 通过修改 `User-Agent` 字符串来模拟不同的浏览器环境，某些网站会根据 User-Agent 来决定是否展示特定的功能或按钮。 ```java WebSettings webSettings = webView.getSettings(); webSettings.setUserAgentString("Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Mobile Safari/537.36"); ``` #### 使用 JavaScript 注入拦截下载请求 可以通过自定义 `WebChromeClient` 和 `WebViewClient` 来监听并阻止下载行为。对于一些基于 `<video>` 标签的内容，可以在加载页面之前注入一段 JavaScript 脚本来禁用右键菜单以及隐藏默认控制栏上的下载图标。 ```javascript // Java端代码 webView.setWebViewClient(new WebViewClient(){ @Override public void onPageFinished(WebView view, String url){ super.onPageFinished(view,url); // 启动JavaScript脚本移除下载按钮 webView.loadUrl("javascript:(function(){" + "var videoTags=document.getElementsByTagName('video');" + "for(var i=0;i<videoTags.length;++i)" + "{videoTags[i].setAttribute('controlsList','nodownload');}" + "})()"); } }); ``` 此段 JavaScript 遍历所有的 `<video>` 元素，并设置其属性 `controlsList="nodownload"`，从而达到关闭下载选项的效果[^1]。 另外需要注意的是，部分在线媒体平台可能采用更为复杂的机制保护版权内容，例如使用 iframe 嵌套或其他形式的安全策略，这些情况下简单的 DOM 操作或许并不能完全解决问题。针对这种情况，建议开发者关注目标站点的具体实现细节，必要时联系对方 API 接口获取合法授权访问资源的方式[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值