我正在使用 Youtube API 在 Android 的 webview 中加载 youtube 视频。一切正常，但没有触发全屏的点击事件。
下面是我的代码：
private fun getHTMLData(videoId: String): String {
return """
<!DOCTYPE html>
<html>
<body style="margin:0px;padding:0px;">
<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
console.error("-------playing-------");
player = new YT.Player('player', {
width: '100%',
videoId: '$videoId',
playerVars: {
'playsinline': 1,
'allowfullscreen': 1 // Enable fullscreen mode
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
// Call updateHeight function on initial load
updateHeight();
}
function onPlayerReady(event) {
console.error("-------onPlayerReady-------");
event.target.playVideo();
// Attach click event listener to the full-screen button
var fullScreenButton = document.querySelector(".ytp-fullscreen-button");
if(fullScreenButton){
fullScreenButton.addEventListener('click', function() {
toggleFullScreen();
});
}else{
console.error("-------Fullscreen button not found-------");
}
}
function onPlayerStateChange(event) {
// Handle player state changes here if needed
}
function toggleFullScreen() {
console.error("Toggling fullscreen");
if (player.isFullscreen()) {
player.exitFullscreen();
} else {
player.playVideo(); // Autoplay is required for full-screen on mobile devices
player.getIframe().requestFullscreen();
}
}
function updateHeight() {
var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
document.getElementById('player').style.height = (screenHeight) + 'px';
}
</script>
</body>
</html>
""".trimIndent()
}
我将其加载到网络视图中：
webView.apply {
settings.javaScriptEnabled = true
settings.loadWithOverviewMode = true
}
webView.webChromeClient = object : WebChromeClient() {
override fun onConsoleMessage(consoleMessage: ConsoleMessage): Boolean {
Log.e("WebView------------->>>", consoleMessage.message())
return true
}
}
val htmlData =
getHTMLData(id)
webView.loadData(htmlData, "text/html", "utf-8");
我收到位于 else 块内的错误日志
console.error("-------Fullscreen button not found-------");我错过了什么吗？
您似乎遇到了使用 YouTube API 时在 Android 版 WebView 中未检测到全屏按钮的问题。让我们检查一下您的代码以确定潜在的解决方案：
检查 HTML 结构：确保可以在 Web 视图中访问全屏按钮。有时，YouTube 播放器的结构可能会发生变化，导致选择器不再与按钮匹配。
验证 JavaScript 执行：确认 JavaScript 已启用并在您的 WebView 中正确执行。您已经在 WebView 设置中启用了 JavaScript，但仔细检查不会有什么坏处。
时序问题：考虑延迟点击事件监听器的附加，直到播放器完全加载。您当前正在将其附加到
onPlayerReady这是
onPlayerReadyfunction onPlayerReady(event) {
console.error("-------onPlayerReady-------");
event.target.playVideo();
// Delay attaching the click event listener
setTimeout(function() {
var fullScreenButton = document.querySelector(".ytp-fullscreen-button");
if (fullScreenButton) {
fullScreenButton.addEventListener('click', function() {
toggleFullScreen();
});
} else {
console.error("-------Fullscreen button not found-------");
}
}, 1000); // Adjust the delay time as needed
}
通过引入轻微的延迟（此处设置为 1000 毫秒），我们可以让玩家在尝试附加事件侦听器之前有更多时间完全加载。
此外，请确保 WebView 的布局不会干扰全屏按钮的可见性或功能。
尝试这些调整，看看它们是否有助于解决问题。如果不是，可能需要进一步调试以确定根本原因。
致以诚挚的问候，