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.

page.$eval() not finding selector, selector works in console

I am trying to use Puppeteer to get the src attribute from an embedded video in a page.
I have tried using page.$eval(), page.evaluate() and page.evaluateHandle() using document.querySelector().
const url = await page.$eval('.video > source:nth-child(3)', el => el.src);
The HTMl structure is as follows:
<video class="video media" id="" alt="" height="1080" width="1920" autoplay="" playsinline="" preload="auto" poster="" tabindex="-1">
<source src="" type="video/mp4">
<source src="" type="video/webm">
<source src="" type="video/mp4">
<source src="" type="video/mp4">
<meta itemprop="contentUrl" content="">
</video>
When I try to use page.$eval to find the element, I get the error "Error: failed to find element matching selector ".video > source:nth-child(3)""
I am able to use document.querySelector('.video > source:nth-child(3)'); in the console, and it returns the html element:
<source src=​"https:​/​/​giant.gfycat.com/​VastGrayGazelle.mp4" type=​"video/​mp4">​
I am also able to search the HTML by selector and it highlights the element.

this should work
const node = await page.$('.video > source:nth-child(3)');
const url = await page.evaluate(body => body.getAttribute('src'), node);
console.log(url);

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

can you dynamically change the video based on vuex state?

I have a small web app, it fakes looking like facetime. I want to switch the video elements via clicking a "next" button which will update a value in vuex and the video will be swapped out accordingly. I've tried this way:
<video autoplay playsinline loop muted class="background-video__source">
<source v-if="currentIndex === 0" src="~assets/img/placeholder/placeholder-1.mp4" type="video/mp4">
<source v-if="currentIndex === 1" src="~assets/img/placeholder/placeholder-2.mp4" type="video/mp4">
<source v-if="currentIndex === 2" src="~assets/img/placeholder/placeholder-3.mp4" type="video/mp4">
<source v-if="currentIndex === 3" src="~assets/img/placeholder/placeholder-4.mp4" type="video/mp4">
</video>
The above method works in the ios simulator in safari but not on desktop chrome.
I've also tried this method:
<video v-if="currentIndex === 0" autoplay playsinline loop muted class="background-video__source">
<source src="~assets/img/placeholder/placeholder-1.mp4" type="video/mp4">
</video>
<video v-if="currentIndex === 1" autoplay playsinline loop muted class="background-video__source">
<source src="~assets/img/placeholder/placeholder-2.mp4" type="video/mp4">
</video>
<video v-if="currentIndex === 2" autoplay playsinline loop muted class="background-video__source">
<source src="~assets/img/placeholder/placeholder-3.mp4" type="video/mp4">
</video>
<video v-if="currentIndex === 3" autoplay playsinline loop muted class="background-video__source">
<source src="~assets/img/placeholder/placeholder-4.mp4" type="video/mp4">
</video>
But this method works nowhere.
Worst case, I can use GIFs instead of video but video would just perform better.
Prior SO questions:
The questions posted about this previously refer you to updating the source like <video autoplay playsinline loop muted :src="someVarSource" class="background-video__source">. I have had no luck with this approach however.

Here's an example of a video player that allows you to dynamically switch out the content. I made a v-reload directive that, when the selection changes, calls load on the player, which causes it to recognize the changed src attribute.
new Vue({
el: 'main',
data: {
selected: 0,
sources: [
'https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4',
'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4'
]
},
directives: {
reload(el, binding) {
if (binding.oldValue !== binding.value) {
el.load();
}
}
}
});
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<main>
<div v-for="s, i in sources">
<label>
<input type="radio" :value="i" v-model="selected">
{{s}}
</label>
</div>
<video controls v-reload="selected">
<source :src="sources[selected]" type="video/mp4" media="all">
<p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
</video>
</main>

Try making the src attribute dynamic and change the data on button click.
Something like this:
<video autoplay playsinline loop muted class="background-video__source">
<source :src="'~assets/img/placeholder/' + currentSource" type="video/mp4">
</video>
data () {
return {
currentIndex: 0,
currentSource: "placeholder-0.mp4",
sources: [
{id: 0, name: "placeholder-0.mp4"}
{id: 1, name: "placeholder-1.mp4"}
{id: 2, name: "placeholder-2.mp4"}
{id: 3, name: "placeholder-3.mp4"}
]
}
},
methods: {
changeVideo () {
// check if it was't the last video source in the list and change the video
if (sources[this.currentIndex + 1] != undefined) {
this.currentIndex += 1
this.currentSource = sources[this.currentIndex + 1].name
}
}
}

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]