How to bypass autoplay blocking on smart tv browsers

Question

How to bypass autoplay blocking on smart tv browsers

212 Views Asked by Roi At 25 May 2023 at 08:49

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?

Original Q&A

There are 2 best solutions below

**Ney2207** · Answer 1 · 2023-06-03T20:09:45.497000

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>

**Guilherme** · Answer 2 · 2023-06-05T03:44:12.140000

Allow me to suggest another approach to this problem. If the browser is a "villain", then I don't believe that you are using the right technology for the job.

This can be best implemented on a full-blown APP. You can still use HTML/JS/CSS, but you will bypass all the browser limitations.

For example, see that for Android TV, see that for LG or that for Samsung. You can also easily find other tutorials and jump-starts.

How to bypass autoplay blocking on smart tv browsers

There are 2 best solutions below

Related Questions in HTML

Related Questions in BROWSER

Related Questions in HTML5-AUDIO

Related Questions in AUTOPLAY

Related Questions in SMART-TV

Trending Questions

Popular # Hahtags

Popular Questions