HTML5 视频删除覆盖播放图标

Posted

技术标签:

【中文标题】HTML5 视频删除覆盖播放图标【英文标题】:HTML5 video remove overlay play icon 【发布时间】:2013-08-18 18:46:02 【问题描述】:

每次在 android WebView 中开始播放视频时,如何移除在视频中心显示一秒钟左右的覆盖播放图标(三角形)?

提前致谢!

【问题讨论】:

我正在使用html5webview。有关完整的可编译项目,请参阅surendra 在WebView and and HTML5 <video> 中的回答。我正在测试 Android 4.1 Jelly Bean,具体来说是 Sony Xperia Tablet Z 华硕的 Google Nexus 7 上也是如此。 @user2106314 你找到解决方案了吗? 如果我理解正确,只需添加一个指向 1x1 透明 png 文件的“海报”属性即可:) 【参考方案1】:

如果你说这张照片

这是我在 Android 6.0 上测试我的应用时的照片。

您可以隐藏此图片。例如:

WebView mWebView = (WebView) findViewById(R.id.web_view);
mWebView.setWebChromeClient(new WebChromeClientCustomPoster());

Chrome 客户端类:

private class WebChromeClientCustomPoster extends WebChromeClient 

    @Override
    public Bitmap getDefaultVideoPoster() 
        return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888);
    

更多信息请阅读api

【讨论】:

嗨!将 WebChromeClientCustomPoster 类转换为 WebChromeClient 时出现错误。 WebView webView = (WebView)appView.getEngine().getView(); webView.setWebChromeClient(new WebChromeClientCustomPoster());我该如何解决这个问题。感谢您的回答。 我做了同样的事情,但问题仍然存在。未解决的问题。 这是需要的导入行:import android.graphics.Bitmap;【参考方案2】:

我找到了解决方案。 只需添加“海报”属性。

例如poster="https://via.placeholder.com/1x1"poster="noposter"

注意:空值被忽略。 (poster="")

【讨论】:

【参考方案3】:

poster="noposter"poster="null" 都不适合我。

我通过创建一个仅具有白色背景颜色的占位符图像并将其分配给每个 DOM 的视频来使其工作。

document.getElementById("myVideo").poster = "noposter.png";

【讨论】:

以上是关于HTML5 视频删除覆盖播放图标的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 视频播放/暂停控件仅在 Safari 浏览器中不起作用

如何以编程方式在 iOS 中添加图标覆盖?

案例 HTML5 SVG图标按钮菜单特效

我可以更改嵌入的 youtube 视频的播放图标吗?

YouTube Player API 在 iframe 中隐藏播放按钮、图标和视频标题

如何使覆盖元素响应?