Flexslider to load different slide on each time the page reloads - html

I am using this flexslider plugin for one of the projects with 3 videos and text over them.
My issue is that sometimes when the page reloads it loads the same slide again.
Is there any way to make sure that a new slide is loaded on page load? I have changed it to random, but the issue with that in some cases loads the same slide multiple times. Ideally we would have new content each time the page reloads.
https://www.jqueryscript.net/slider/Awesome-Fully-Responsive-jQuery-Slider-FlexSlider.html
Any suggestions on how can I tweak the script to load the next one on page load. No sliding effect needed.
Thank you.
$(window).on('load', function() {
$('.flexslider').flexslider({
animationLoop: false,
randomize: true,
controlNav: false,
touch: true,
directionNav: false,
smoothHeight: true,
slideshow: false
});
});
<div class="flexslider">
<ul class="slides">
<li>
<video autoplay="" class="FullVideo" loop="" muted="" playsinline="" preload="auto"><source src="/Portals/0/Videos/Pexels1-Nature.mp4" type="video/mp4" /></video>
<div class="wrapper">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-md-6 col-lg-5 ContentOverlay">
SOME CONTENT HERE
</div>
</div>
</div>
</div>
</li>
<li>
<video autoplay="" class="FullVideo" loop="" muted="" playsinline="" preload="auto"><source src="/Portals/0/Videos/Pexels2-Tree.mp4" type="video/mp4" /></video>
<div class="wrapper">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-md-6 col-lg-5 ContentOverlay">
SOME CONTENT HERE
</div>
</div>
</div>
</div>
</li>
<li>
<video autoplay="" class="FullVideo" loop="" muted="" playsinline="" preload="auto"><source src="/Portals/0/Videos/Pexelsvideo-ladymp4.mp4" type="video/mp4" /></video>
<div class="wrapper">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-md-6 col-lg-5 ContentOverlay">
SOME CONTENT HERE
</div>
</div>
</div>
</div>
</li>
</ul>
</div>

Related

play button problem on my online radio listening site?

I have a problem with my online radio listening website.
my problem; When I turn on some radios to listen to them from a browser on the computer, the play button of the radio appears inactive and does not open. When I enter the same radio from Mabil phone with a web browser, it works without any problems. What could be causing this problem? I'm leaving my Radio.php page for you.
<section id="clients">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-md-8 mb-4 pb-4">
<div class="section-header">
<h2><?= $radio_sonuc['title'] ?> Dinle Canlı Dinle</h2>
</div>
<div class="row-zoom">
<div class="row">
<div class="col-md-3 col-lg-3 col-12" style="padding-top: 10px;">
<a href="radio.php?id=<?= $radio_sonuc['id'] ?>">
<div class="radio-component">
<img src="https://www.myhomepage.com/radio3/images/<?= $radio_sonuc['image'] ?>" alt="">
<span><?= $radio_sonuc['title'] ?></span>
</div>
</a>
</div>
<div class="col-md-9 col-lg-9 col-12" style="padding-top: 15px;">
<audio controls preload="auto" style="width: 100%;">
<source src="http://yayin.asymedya.com:8020/;" type="audio/ogg">
<source src="http://yayin.asymedya.com:8020/;" type="audio/mpeg">
<source src="http://yayin.asymedya.com:8020/;" type="audio/wav">
<source src="http://yayin.asymedya.com:8020/;" type="audio/x-ogg">
<source src="http://yayin.asymedya.com:8020/;" type="audio/acc">
<source src="http://yayin.asymedya.com:8020/;" type="audio/x-wav">
<source src="http://yayin.asymedya.com:8020/;" type="application/ogg">
<source src="http://yayin.asymedya.com:8020/;" type="audio/opus">
<source src="http://yayin.asymedya.com:8020/;" type="application/x-ogg">
<source src="http://yayin.asymedya.com:8020/;" type="audio/x-vorbis+ogg">
<source src="http://yayin.asymedya.com:8020/;" type="application/x-mpegURL">
</audio>
</div>
</div>
</div>
```

Replace image with video in gallery

This is the code I'm using for the gallery, bootstrap based template
<div class="col-md-4 ftco-animate">
<div class="gallery img d-flex align-items-end" style="background-image: url(images/gallery/leopardshark.jpg);">
<a href="images/gallery/leopardshark.jpg" class="icon image-popup d-flex justify-content-center align-items-center">
<span class="icon-expand"></span></a>
<div class="desc w-100 px-4">
<div class="text w-100 mb-3">
</div>
</div>
</div>
</div>
I want to replace the background image with a video, is there away to do that and make it autoplay in all browsers? I can get mp4s to work in Safari if I just replace the image url.
You can do it by replacing the img with:
<video autoplay>
<source src="/path" type="video/mp4">
error message
</video>
This will autoplay in Firefox but not in Chrome(they blocked it). So you will need to also use something like this if you don't want to add controls:
$('.class_name').on('load', function(){
$('video').load();
$('video').play();
});

Bootstrap 5: How do I make div side by side

I would like to put these two images side by side
Here is my code:-
code
<div class="container-md">
<div class="row">
<div class="col-md-4">
<p> Image Video Live Streaming </p>
<img src="" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
<div class="col-md-6">
<p> Depth Video Live Streaming </p>
<img src="" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
</div>
</div>
you code work perfectly with bootstrap 5. Added your code with dummy images in codepen.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
<p> Image Video Live Streaming </p>
<img src="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?cs=srgb&dl=pexels-philipp-m-100582.jpg&fm=jpg" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
<div class="col-md-6">
<p> Depth Video Live Streaming </p>
<img src="https://images.pexels.com/photos/38136/pexels-photo-38136.jpeg?cs=srgb&dl=pexels-veeterzy-38136.jpg&fm=jpg" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
</div>
</div>
.row {
display: flex;
justify-content: space-around;
}
this is one way to do it using CSS.
Update:
There is now space around the two images.
Check out this URL to understand more about CSS Flexbox, and all the awesome things you can do !

Bootstrap - How get small video thumbnail?

I would like to have a small thumbnail of a video, uploaded by user in a HTML webpage. When user clicks on it, it shows the video in the same webpage.
I tried this code:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/video/hanson.mp4"></iframe>
</div>
But it is not what I need.
Please note that the videos are not on youtube or so on. And there are numerous video files so the function should be able to create thumbnail from the address of the file on the server.
Is there any way to get thumbnail as I described?
Thanks.
For example this will work with thumbnails in Bootstrap.
Update: Set image src to https
function play(item){
var videoFiles = 'https://www.youtube.com/embed/';
var videoParam = 'autoplay=1&rel=0&showinfo=0&autohide=1';
document.getElementById('player').src = videoFiles + item + '?' + videoParam;
}
<!-- bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-wrap mx-auto" style="width:100%; max-width:400px;">
<div class="col-12 mb-4 player">
<div class="embed-responsive embed-responsive-16by9">
<!-- first item of playlist -->
<iframe id="player" class="embed-responsive-item" frameborder="0" width="560" height="315"
src="https://www.youtube.com/embed/1G4isv_Fylg?version=3&autoplay=0&rel=0&showinfo=0&autohide=1"
allow="autoplay; clipboard-write; encrypted-media" allowfullscreen></iframe>
</div>
</div><!--/.player-->
<div class="col-12 text-center playlist">
<div class="row">
<a class="col-3 mb-3" onClick="play('1G4isv_Fylg')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/1G4isv_Fylg/0.jpg" alt="" />
<div class="card-body py-2"><small>Paradise</small></div>
</a>
<a class="col-3 mb-3" onClick="play('YlUKcNNmywk')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/YlUKcNNmywk/0.jpg" alt="" />
<div class="py-2"><small>Californication</small></div>
</a>
<a class="col-3 mb-3" onClick="play('xik-y0xlpZ0')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/xik-y0xlpZ0/0.jpg" alt="" />
<div class="py-2"><small>A Forest</small></div>
</a>
<a class="col-3 mb-3" onClick="play('1w7OgIMMRc4')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/1w7OgIMMRc4/0.jpg" alt="" />
<div class="py-2"><small>Sweet Child Mine</small></div>
</a>
</div>
</div><!--/.playlist-->
</div>
Just need to add one thumbnail add click event also, I implemented this. look into it,
$(document).ready(function(){
$('#video-id,.demo-play-btn').click(function(){
$('#video-id').get(0).paused ? $('#video-id').get(0).play() : $('#video-id').get(0).pause();
$(".demo-play-btn").toggle();
});
});
.demo-play-btn{
position:absolute;
top:35%;
background:#fff;
left:35%;
cursor:pointer;
}
.demo-play-btn img{
width:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo-video">
<video id="video-id" width="470" height="255" poster="https://i.ytimg.com/vi/5Peo-ivmupE/maxresdefault.jpg">
<source src="https://st2.depositphotos.com/4083751/6003/v/600/depositphotos_60037637-stock-video-toddler-with-bottle-and-dummy.mp4" type="video/mp4">
</video>
<div class="demo-play-btn">
<img src="https://lh3.googleusercontent.com/proxy/9Oa4tg5B3DLeqAIsO_qRhmQg_pqtW3RtwBQJYdcv4e44lGfl4UReTpWpe5TDjlyJU3254RakFD48FPfsALnBI2cD6wxt8zMRNtrGEytVkMDHfLxBdiOG7JU-m0csf5RC6AY" class="play-btn" title="Play Video">
</div>
</div>

Bootstrap css - div height and overflowing

I have a problem with my friend's website which I can't solve. If you could help I'd be very pleased..
And the problem is:
My bootstrap div doesn't hold a height and is going under following div, especially in tablet/phone responsive version. Maybe it will be easier if I give you the address:
http://trido.io/index3.html
and the code I'm talking about is:
<section id="download" class="download bg-primary text-center">
<div class="container">
<div class='col-md-1'>
<!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
</div>
<div class='col-md-4'>
<div class="row">
<div class='col-md-1'>
</div>
<div class='col-md-9'>
<p align="center">TriDo - Do a chain of three!</p><br>
<p>Arrange your balls in order from 1 to 3:
horizontally, vertically or diagonally. Prevent opponent's arrangement of balls.</p><br><br>
</div>
</div>
<div class="row">
<ul>
<li>Multiplayer<li>
<li>Endless single-player mode<li>
<li>Game Center leaderboards<li>
<li>Game Center Achievements<li>
</ul>
</div>
</div>
<div class='col-md-1'>
</div>
<div class="col-md-5">
<div class="device-container">
<div class="device-mockup iphone6 portrait black">
<div class="device">
<div class="screen">
<!-- <video width="300" height="534" controls> -->
<video width="270" height="480" controls>
<source src="TrailerDoTel.mp4" type="video/mp4">
<source src="TrailerDoTel.ogg" type="video/ogg">
</video>
<div class="button">
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-0.5'>
<!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
</div>
</div>
</section>
This is because your <div class="device-mockup iphone6 portrait black"> is set to position absolute which takes the element out of the flow of the document, so its content will not affect other elements in the DOM.
If you set it to position: relative; it will no longer overlap the div below it.
Or you can give your .device-container a static height, like height: 676px;