How to bypass autoplay blocking on smart tv browsers
Question
We are trying to implement a web-based system locally that will be displayed on smart tv browsers throughout the facility, problem is the autoplay policy basically, the sole hindrance on our endevour.
-I cannot use the flagging using.exe param as it is a smart tv
-Command prompt is not existent
-Gesture-based trigger consent, is inconsistent depending on the smart tv or the browser.
Any idea how i can fully bypass the autoplay blocking?
1 answers
solution1
0 2023-06-03 20:09:45
The autoplay blocking is a really hard to evade configuration that more and more browsers are implementing. I've been trying and researching how to surpass it in the most famous browsers like Chrome or Edge, but I haven't found out how to do it directly.
A possible solution could be making the user interact slightly with the site before completely load the page to make the browser allow the autoplay attribute; maybe with a entrance view in the page. Then the video or audio will be played. Here's a example:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.