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
Related
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.
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
}
}
}
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]
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);
)};
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();
});