如何绕过智能电视浏览器上的自动播放阻止

Question

赏金将在 23 小时后到期。 此问题的答案有资格获得+100声望赏金。 Roi想让更多人关注这个问题。

我们正在尝试在本地实施一个基于网络的系统，该系统将显示在整个设施的智能电视浏览器上，问题基本上是自动播放政策，这是我们努力的唯一障碍。

-我不能使用标记 using.exe 参数，因为它是智能电视

-命令提示符不存在

-基于手势的触发同意，根据智能电视或浏览器的不同不一致。

知道如何完全绕过自动播放阻塞吗？

Answer 1

越来越多的浏览器正在实施自动播放阻止是一个非常难以规避的配置。 我一直在尝试和研究如何在 Chrome 或 Edge 等最著名的浏览器中超越它，但我还没有找到如何直接做到这一点。

一种可能的解决方案是让用户在完全加载页面之前与站点进行轻微交互，以使浏览器允许自动播放属性； 也许在页面中有一个入口视图。 然后将播放视频或音频。 这是一个例子：

 window.onload = function() { var enter = document.getElementById("playbtn"); var fv = document.getElementById("firstView"); var video = document.getElementById("video"); // It makes the introduction view // disappear, and loads the video. // (Here's where the user interacts with the page) enter.addEventListener("click", function() { fv.style.position = "absolute"; fv.style.display = "none"; video.autoplay = true; video.setAttribute("preload", "auto"); }); // This way the introduction could be eassier // since there's no need to move the cursor document.addEventListener("click", function() { fv.style.position = "absolute"; fv.style.display = "none"; video.autoplay = true; video.setAttribute("preload", "auto"); }); }

 /*Styte for the introduction view */ body { margin: 0; } #firstView { display: block; position: fixed; height: 100%; width: 100%; background-color: #5f90ef; z-index: 10; } #message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } /*Just to illustrate where the video is*/ video { width: 50%; max-height: 480px; border: 1px solid; }

 <.DOCTYPE html> <html> <head> <title>Page with entrance view</title> </head> <body> <!-- Introduction view that will appear to make the user interact with the page --> <div id="firstView"> <div id="message"> <h1>Welcome</h1> <button id="playbtn">Press to enter</button> <p>Or click everywhere!</p> </div> </div> <h1>The page</h1> <!-- Video that will be played by passing the introduction view --> <video id="video" type="video/mp4" src="video.mp4" preload="none"></video> </body> </html>