Owl carousel 2: Lazy load for videos - javascript

I have a carousel powered by Owl carousel v2 with lazy load enabled:
JS:
$('.owl-carousel').owlCarousel({
lazyLoad: true
});
HTML:
<div class="owl-carousel">
<div>
<img class="owl-lazy" data-src="...">
</div>
</div>
which works OK. Then I tried to apply the same code to the HTML5 video tags I have:
<div class="owl-carousel">
<div>
<video>
<source class="owl-lazy" data-src="..." type="video/mp4">
</video>
</div>
</div>
which didn't work. Any ideas how to enable it for videos too?

If anybody came accross the same issue, the solution I came up with is below:
// Lazy load for videos
var modalSlider = $('.owl-carousel');
modalSlider.on('changed.owl.carousel', function(event) {
var current = event.item.index;
var currentVideo = $(event.target).find('.owl-item').eq(current).find('video');
var currentVideoSource = currentVideo.find('source');
// Pause all videos
var videos = modalSlider.find('video');
if ( videos.length ) {
videos.each(function() {
$(this)[0].pause();
});
}
// Play if video found
if ( currentVideo.length ) {
var currentVideoSrc = currentVideoSource.attr('data-src');
currentVideoSource.attr('src', currentVideoSrc);
currentVideo[0].load();
currentVideo[0].play();
}
});

Related

Alpine.js - stop video on modal close

I have a working code, that stops the video on modal close. However, I wonder is there a way to achieve the same results using Alpine.js only. Without having a separate JS as in my current case.
Here is my code:
<div x-show="videoModal">
<div #click.away="videoModal = false, handleClick(videoPlayer)">
<div id="videoPlayer">
<iframe src="https://www.youtube.com/embed/{{ $video_id }}"></iframe>
</div>
</div>
</div>
<script>
function handleClick(element) {
var iframe = element.querySelector( 'iframe');
if ( iframe ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
}
</script>

How to remove video effect in Javascript?

In my API class today we learned how to show the camera with the tag. We also learned how to add effects with JavaScript. But, I'm stuck on how to reverse these effects. How would I make the clear button clear the current effect?
<body>
<h1>Magic Camera</h1>
<div class="tools">
<button id="sepia">Sepia</button>
<button id="">Clear</button>
</div>
<div class="scene">
<img src="billboard.jpg">
<div class="video-container">
<video id="myCamera" autoplay></video>
</div>
</div>
<script>
var myDevices = navigator.mediaDevices;
var permissions = {
audio: false,
video: true
};
myDevices.getUserMedia(permissions).then(showCam);
function showCam(stream){
$("#myCamera")[0].srcObject = stream;
}
function addEffect(event){
var effect = event.currentTarget;
var filter = `${effect.id}(1)`;
$("#myCamera").css("filter", filter);
}
$("button").click(addEffect);
</script>
</body>```
$('#myCamera').css('filter', '');

Videojs not working with dynamic URL but working with static URL

I am tryign to implement videojs in my reactjs project. I am providing "src" to video component as props. The plauer "No compatible source was found for this media.". Below is my code
initVideoJS = () => {
let self = this;
let that = this;
const options = {
fluid: true,
preload: "auto",
autoplay: false,
controls: true,
aspectRatio: "16:9",
loop: false,
// playVideo: false
}
myPlayer = videojs('video-el-p', options)
}
render () {
return (
<section className="assets-container-right" id="assets-container-right">
<div className="assets-container-wrapper">
<section className="video-container" id="video-container" style={{height: `${this.state.video_container_height}px`}}>
<div className="video-player">
<video onContextMenu="return false;"
ref={node => this.video_el = node}
className="video-js video-el vjs-big-play-centered vjs-default-skin"
id="video-el-p" loop={false} controls>
<source src={this.props.assetVersion && this.props.assetVersion.video.file} type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
</section>
But the same code works when I give a static video url as src. Also
this.props.assetVersion.video.file
is a valid video url. This url works on normal html5 video component. What am I doing wrong?
p.s. There is another videojs player instance used in some other page of the application. But that has different id. So I don't think that is affecting it.
I have implemented videojs multiple times but this is the first time I am coming accros this issue. Thanks in advance.
I think the issue is in the fact that the video source might be undefined as you are using a conditional <source src={this.props.assetVersion && this.props.assetVersion.video.file} type="video/mp4"/>
Perhaps try to only render the video element when ever the video src is not undefined. It would look something like this.
render() {
let video;
if (this.props.assetVersion) {
video = (
<video onContextMenu="return false;"
ref={node => this.video_el = node}
className="video-js video-el vjs-big-play-centered vjs-default-skin"
id="video-el-p" loop={false} controls>
<source src={this.props.assetVersion.video.file} type="video/mp4" />
Your browser does not support HTML5 video.
</video>
);
}
return (
<section className="assets-container-right" id="assets-container-right">
<div className="assets-container-wrapper">
<section className="video-container" id="video-container" style={{ height: `${this.state.video_container_height}px` }}>
<div className="video-player">
{video}
</div>
</section>

Dynamically added videos using jquery not playing on mobile

I am trying to display video preview when some one touch on that screen on touchstart event by dynamically add video tag and video source (which is .webm) video and will start to play automatically. I can fetch the video tag but video is not getting played.
Here is my code:
<div class="thumb-overlay playthumb">
<img src="http://img.domain.com/thumbs/2.jpg" title="" alt="" id="2" class="img-responsive ">
<div class="duration">15:11</div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$(".playthumb").on('touchstart', function(event) {
var thumb = $(this).children('img')[0];
var id = thumb.id;
$('#thumbPlayerM').remove();
var video = $('<video style="width:100%;height:100%;position:absolute;top:0;left:0;padding:0;margin:0;" id="thumbPlayerM" class="img-fluid" loop=""></video>');
var content = '<source type="video/webm" src="http://img.domain.com/webm/' + id + '/' + id + '.webm"></source>';
$(video).append(content);
$(video).hide();
var target = $("#" + id);
$(target).after($(video));
$(video)[0].play();
$(video).fadeIn();
});
});
</script>
I even try this also
var vid = $("#thumbPlayerM");
vid.play();
$(video).fadeIn();
Video is coming over the image but not playing. Any one can help me? Thank you.
I fixed this issue, need to add this:
<video autoplay loop muted playsinline></video>
My videos are already muted but I have no idea why it was not working. I must check my encoder.

Playing a video in slider and then swapping out for an image at end

So I currently have a video playing inside a HeroCarousel slider. There is an image before the slider and another image after the slider.
My code:
<div data-time="8000" data-prev-src="/media/splash/slider-left.png" data-next-src="/media/splash/slider-right.png">
<a href="/island-careers/retail.html">
<img src="/media/island/splash/now-hiring-splash.jpg" />
</a>
</div>
<div data-time="9000" data-video="true" data-prev-src="/media/splash/slider-left-black.png" data-next-src="/media/splash/slider-right-black.png" id="video">
<a href="/catalog/island-collections/packing-list/">
<video width="1275" height="557" preload="auto" id="myVideo">
<source src="/media/island/splash/video-2.mp4" type="video/mp4">
</video>
<img src="/media/island/splash/escape-splash.jpg" />
</a>
</div>
<div data-time="8000" data-prev-src="/media/splash/slider-left.png" data-next-src="/media/splash/slider-right.png">
<a href="/catalog/mens-resort-wear/classic-shirts/breaker-striped-red-linen-shirt.html">
<img src="/media/island/splash/breakers-shirt-splash.jpg" />
</a>
</div>
So my issue is that the video is playing when the page loads. When the slide enters into view, the video is already at its completed frame. I want the video to play when the slide enters into view and not when the page loads. The slider adds the class current to the current slide so I started writing the following script in order to get it to play:
//playing video
jQuery(document).ready(function() {
$play = 0;
if($play > 0) {
if(jQuery("article#video").hasClass("current")) {
jQuery("#myVideo").get(0).play();
$play++;
}
}
});
This script is not working completely.
I would also like to swap out the video for the image found underneath it once the video ends (the video should only be played once)
One way to achieve this would be using flags and listening to DOMSubtreeModified and ended event.
for starting the video only when the slide is visible, you can do
var canPlay = false, played = false;
$('.hero-carousel article').bind('DOMSubtreeModified', function(e) {
if(played){ // flag to make sure it is played only once.
$('.hero-carousel article').unbind('DOMSubtreeModified');
}else if($(e.target).hasClass('current')){
canPlay = true; // flag to make sure, playing starts only when slide is current.
var video = $(e.target).find('video')[0];
if(video){
video.play();
}
}
});
$('.hero-carousel article video').bind('play', function(){
if(!canPlay){
this.pause();
this.currentTime = 0;
}else{
played = true;
}
});
and for hiding the video once it is finished, you can do:
$('.hero-carousel article video').bind('ended', function(){
this.style.display = 'none';
});
fiddle demo

Categories

Resources