We Keep Coding

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

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();

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>

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

How to change buttons for scrolling horizontally to scroll vertically

I'm making a video showcase that is wider than the actual screen, and right now you can scroll through them by holding the scroll bar at the bottom and moving it left-right. I want to make it so that you can use buttons to do that.
How it looks now:
How I want it to work:
Currently the buttons don't work
This is the code that I have so far, I modified a code that has buttons to move up and down, but I want mine to move the content left and right.
Original code: https://codepen.io/taneltm/pen/QjBbMW
HTML:
<button class="left"><</button>
<div class="scrollmenu">
<video class="featured" controls> <source src="vid.mp4"
type="video/mp4"> </video>
<video class="featured" controls> <source src="vid.mp4"
type="video/mp4"> </video>
<video class="featured" controls> <source src="vid.mp4"
type="video/mp4"> </video>
<video class="featured" controls> <source src="vid.mp4"
type="video/mp4"> </video>
<video class="featured" controls> <source src="vid.mp4"
type="video/mp4"> </video>
</div>
<button class="right">></button>
JS:
<script type="text/javascript">
var $content = $('div.scrollmenu');
function changeContentScroll(pos) {
var currentPos = $content.scrollLeft();
$content.scrollLeft(currentPos + pos);
}
function onright() {
changeContentScroll(-10);
}
function onleft() {
changeContentScroll(+10);
}
$('button.right').on('click', onleft);
$('button.left').on('click', onright);
</script>

For me your code works just fine, I just had to add jQuery.
Could it be that you did not load it in your html?
Have a look at this codepen, (it doesn't have nice css but the buttons work).
Try to add
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
before your own JavaScript

Play/Pause multiple video with one function

I can currently play and pause a video by clicking anywhere in the <video> tag.But unfortunately, when i have added a second video the function works only for the first video only.
var video = document.getElementById('vid');
video.addEventListener('click', function() {
this.paused?this.play():this.pause();
},
false);
video.addEventListener("pause", function() {
document.getElementById("paused").style.display = "";
});
video.addEventListener("play", function() {
document.getElementById("paused").style.display = "none";
});
<div id="main">
<div id="computer" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
Any issue with the js code. Kindly advice.

it will not work lake that because ,the interpreter will consider just the last id with the same element ,if you use just two videos then you can just add other video id and paused id
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused2" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid2">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

try to use classes instud of ids
for more detaill take a lok to this page
http://flash.flowplayer.org/demos/installation/multiple-players.html

How to get html id output in src

Trying to get html id output in a video source src and poster
<video id="really-cool-video" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="$('#posterURL').html();"
data-setup='{}'>
<source src="$('#videoURL').html();" type='video/mp4'>
</video>
<div id="posterURL"></div>
<div id="videoURL"></div>

You can use the .attr()-function of jQuery for this:
$(document).ready(function(){
var posterUrl = $('#posterURL').html();
var videoUrl = $('#videoURL').html();
$('#really-cool-video').attr('poster', posterUrl);
$('source').attr('src', videoUrl);
)};

playing html5 player

The code below works but it plays ALL instances of the projekktor video player in the DOM simultaneously. How would I revise the code to only play the video within the same parent div as the .startb i click?
html
<div class="videoContainer">
<div class="playerHolder">
<div class="videoPlayer"><video class="projekktor" poster="poster.jpg" title="" width="640" height="385" controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
</video></div>
<div class="startb"><img src="dbs/images/start.png"/></div>
<div class="postImage"><img src="006_CCC_Magdelena_poster.jpg" title="" width="640" height="385" /></div>
</div>
</div>
js
$('.startb').click(function() {
projekktor('*').each(function() {
this.setPlay();
});
});

Try this:
$('.startb').click(function() {
$(this).parent('div').find('.projekktor').setPlay();
});