CODEWITHSUNDEEP
javascripthtmljquerycss
Shashwat
Shashwat

Reputation: 11

How to play html video when its visible

I am making a tiktok ui project but video are not autoplay when it's on screen after scroll Like tiktok Demo

My code

        <div class="parent">
           <div class="vi"> 
            <video class="video-player" id="vid1" controls> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4"> </video>
        </div>
       <div class="vi"> 
            <video class="video-player" id="vid1" controls> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4"> </video>
        </div> <div class="vi"> 
            <video class="video-player" id="vid1" controls> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4"> </video>
        </div> <div class="vi"> 
            <video class="video-player" controls> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4"> </video>
        </div> <div class="vi"> 
            <video class="video-player" controls> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4"> </video>
        </div>
              


  </div>

    <script>
function isOnScreen(element)
{
    var curPos = element.offset();
    var curTop = curPos.top;
    var screenHeight = $(window).height();
    return (curTop > screenHeight) ? false : true;
}

if(isOnScreen($('video'))) {
console.log("")

 };
    </script>

Please solve this issue with javascript or jQuery

Upvotes: 0

Views: 889

Answers (3)

joker
joker

Reputation: 51

I think you should add video components on the fly, rather than writing links directly in HTML.

Upvotes: 0

Biju Kalanjoor
Biju Kalanjoor

Reputation: 552

You can try like this

var remoteVideo = document.createElement("video"); /*your Video element */
remoteVideo.id = `xxx_ID`;
remoteVideo.autoplay = true;
remoteVideo.playsInline = true; /* For Safari fix */

or

remoteVideo.play();

Upvotes: 1

pullidea-dev
pullidea-dev

Reputation: 1803

You should give attribute "autoplay" to each video tag like this.

 <video class="video-player" controls **autoplay**> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4" > </video>

Upvotes: 0

Related Questions