CODEWITHSUNDEEP
htmlbrowserhtml5-audioautoplaysmart-tv
Roi
Roi

Reputation: 565

How to bypass autoplay blocking on smart tv browsers

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?

Upvotes: 1

Views: 471

Answers (2)

Guilherme
Guilherme

Reputation: 5341

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.

Upvotes: 0

Ney2207
Ney2207

Reputation: 1

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>

Upvotes: 0

Related Questions