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

How to link two videos in a website to play at the same time on hover with javascript?

So I am helping my gf with her Uni project. She is a graphic designer and she needed some help with creating a webpage with a video comics.
I made it so that the videos would play on hover with Javascript (this is the first time ever I had to use JS) and now I need a way to bind some of them together - e.g. you hover on one or the other and both play, you remove the mouse and both stop. And I need to do it several times. The website will contain a total of 24 Videos.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/1.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/2.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>

I would go with mouse enter and leave events to avoid redudancy of triggering the execution everytime your mouse is inside the video with movements
$(".thevideo").mouseenter(function(){
console.log("mouse is entered");
$(".thevideo").each(function(){
this.play();
})
})
$(".thevideo").mouseleave(function(){
$(".thevideo").each(function(){
this.pause()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>

At the moment you are only calling the function on 1 video - the video that triggered the event i.target.play();
So you just need to toggle pause and play on all videos inside .firstrow instead:
$(".firstrow .video").on("mouseenter", ()=>{
$(".firstrow video").each((index, video)=>{
video.play();
});
});
$(".firstrow .video").on("mouseleave", ()=>{
$(".firstrow video").each((index, video)=>{
video.pause();
});
});

Change video src using javascript

I have HTML code for two version of video, and I'm trying to change automaticly src of Video 2 with src of Video 1
Video 1 code:
<div id="TopPane5VideoPlayer_TopPlayer">
<div id="TopPane5VideoPlayer_divInternalT">
<object type="application/x-shockwave-flash" data="../player.swf?url=Root/Videos/3/17-08-2016/742393_ocean.mp4&volume=90&autoPlay=true&previewImageUrl=../Root/Videos/3/17-08-2016/1920X955742393_ocean.jpg" width="1920" height="955" wmode="opaque" id="video_overlay">
</object>
</div>
Video 2:
<div class="sl-video">
<video autoplay>
<source src="video/trailer.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
<source src="video/trailer.webm" type="video/webm; codecs="vp8, vorbis"" />
Video not supported.
</video>

Try this:
Array.from(document.querySelectorAll('source')).map(x => x.remove())
document.querySelector('video').src =
document.querySelector('object').getAttribute('data').match(/url=([^&]+)&/)[1]

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