I am a newbie, I want to show random videos when loading the website, I have found this code, change some things and achieve what I wanted, but now I need each video to have a small description and a link I attach this image I want something similar to this, is there someone here who can help me with this, thanks in advance.
https://piic.me/img-134
<video autoplay muted loop id="OracleVid" style="display: auto; max-width:100%;">
<source id="OracleVidSRC"/>
</video>
<script>
var clip = document.querySelector("#OracleVidSRC");
var video = document.querySelector("#OracleVid");
var oracleVidArray = [
"http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4",
"http://localhost/website/wp-content/uploads/2021/10/6b_xlarge_preview.mp4",
"http://localhost/website/wp-content/uploads/2021/10/elementor1_xlarge_preview.mp4"
];
window.onload = function oracleFunction() {
clip.src = oracleVidArray[Math.floor(Math.random() * oracleVidArray.length)];;
//video.style = "display: block";
video.load();
}
</script>
You can also see the original code here:
Randomly changing video src with JS
I just want to include this in the js code above, (each video has a different url and description)
<figure class="wp-block-video">
<a rel="noreferrer noopener" href="https://website.com" target="_blank">
<video autoplay="" loop="" muted="" src="http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4" playsinline="">
</video>
</a>
<figcaption><strong><code><span style="color:#111111" class="has-inline-color">Description
</span></code></strong><a rel="noreferrer noopener" href="https://website.com" target="_blank">website.com</a></figcaption>
</figure>
Add class "none" in:
<figure class="wp-block-video none">
Edit css class:
.none { display:none; }
Put your code with "<figure" after code with "<video" as below:
<video autoplay muted loop id="OracleVid" style="display: auto; max-width:100%;">
<source id="OracleVidSRC"/>
</video>
<figure class="wp-block-video none">
<a rel="noreferrer noopener" href="https://website.com" target="_blank">
<video autoplay="" loop="" muted="" src="http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4" playsinline="">
</video>
</a>
<figcaption><strong><code><span style="color:#111111" class="has-inline-color">Description
</span></code></strong><a rel="noreferrer noopener" href="https://website.com" target="_blank">website.com</a>
And in function oracleFunction() remove class none.
Related
I have several videos on my site that have the same class.
I want to play only one video when hovering over it. As soon as I removed the hover, the video was paused with a delay of 1 second.
I learned how to start a video and pause it. But as soon as I add setTimeout I get an error:
Uncaught TypeError: Cannot read properties of undefined (reading 'pause')
Below I am attaching the html code of my solution:
<a href="#" class="cases__item">
<video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>
<a href="#" class="cases__item">
<video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>
<a href="#" class="cases__item">
<video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>
Also I am attaching the html code of my solution:
var figure = $(".cases__item").hover( hoverVideo, hideVideo );
function hoverVideo(e) {
$('.cases__item-video', this).get(0).play();
}
function hideVideo(e) {
setTimeout(function (){
$('.cases__item-video', this).get(0).pause();
}, 1000);
}
I also add working jsfiddle with my code: https://jsfiddle.net/v7certb6/1/
Please help me to resolve the video pause issue after one second.
I will be very grateful for any help.
The issue is because this in the setTimeout() function handler refers to that function, not to the element reference provided in the invocation of the outer hoverVideo() or hideVideo() functions.
To fix this issue create a variable in the outer scope to retain the reference to this which you use within the setTimeout():
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<a href="#" class="cases__item">
<video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>
<a href="#" class="cases__item">
<video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>
<a href="#" class="cases__item">
<video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>
var figure = $(".cases__item").hover(hoverVideo, hideVideo);
function hoverVideo(e) {
let _this = this;
$('.cases__item-video', _this).get(0).play();
}
function hideVideo(e) {
let _this = this;
setTimeout(function() {
$('.cases__item-video', _this).get(0).pause();
}, 1000);
}
Example Fiddle - note the example is in a fiddle as the cross-site content has issues when played on the main SO site.
As a side note, the JS can be reduced to the following, which has the exact same behaviour just using arrow functions:
$(".cases__item").hover(
e => e.currentTarget.querySelector('.cases__item-video').play(),
e => setTimeout(() => e.currentTarget.querySelector('.cases__item-video').pause(), 1000));
Time ago I had a header implemented with a Bootstrap carousel: You know, something like this:
<div class="carousel">
<div class="item"><img src="pic1.jpg"></div>
<div class="item"><img src="pic2.jpg"></div>
</div>
Pay attention to that link on "pic2.jpg", this will be fun...
Recently, I have been asked to use <picture> elements, so now it is posible to display images for mobile devices:
<div class="item">
<picture>
<source media="(max-width: 576px)" srcset="pic1-small.jpg">
<img src="pic1.jpg">
</picture>
</div>
<div class="item">
<picture>
<source media="(max-width: 576px)" srcset="pic2-small.jpg">
<img src="pic2.jpg">
</picture>
</div>
And here is the tricky question: I need to add a link only in the mobile image (pic2-small.jpg).
(Well, in fact could be links on every image, or none at all, only in the mobile image, only in the desktop image... This is managed by the administrator user)
So, I can't do this because the link should be only for pic2-small, not pic2:
<div class="item">
<a href="example.com">
<picture>
<source media="(max-width: 576px)" srcset="pic2-small.jpg">
<img src="pic2.jpg">
</picture>
</a>
</div>
What I did is this:
<div class="item" onclick="header_onclick(this)">
<picture>
<source media="(max-width: 576px)" srcset="pic2-small.jpg?target=pic2-small-link">
<img src="pic2.jpg">
</picture>
<a id="pic2-small-link" href="example.com" style="display: none"></a>
</div>
<script>
function header_onclick(carousel_item)
{
var current_src = carousel_item.querySelector("img").currentSrc;
if (typeof current_src === "undefined") {
return;
}
var src_parts = current_src.split("?target=");
if (src_parts.length < 2) {
return;
}
var link = document.getElementById(src_parts[1]);
if (link) {
link.click();
}
}
</script>
An onclick event in the carousel item and a javascript function.
A target value in the URL of the image.
A hidden <a> with the destination URL.
The magic is in this line:
var current_src = carousel_item.querySelector("img").currentSrc;
currentSrc has the URL of the image that the browser is currently showing according to the screen size. So, from that URL I take the target parameter and use it to get the corresponding link and then execute it.
All this is working, but I feel it too hacky for my taste. I'm not very experienced with the <picture> element, so my question is: this could be resolved in a better way?
I have a play button inside of a video js video / container and I would like the button to hide(), when the video plays. It works if I just use $('.video-play-btn).hide() on the play function but the problem is I have numerous videos on the page so it is hiding them all, I only want the video that is being played for the button to hide.
html:
<div class="col-lg-6">
<video-js data-video-id="6563228568228"
data-embed="default"
data-application-id=""
class="video-js video-container--outer full-width"
controls
id=""
webkit-playsinline="true" playsinline="true"></video-js>
<!-- play button -->
<button class="video-play-btn btn"><i class="fa fa-play fa-play-video-inline"></i></button>
</div>
jquery:
var videoPlayer = videojs('video-one');
videoPlayer.on('play', function () {
$(this).parent().find('.video-play-btn').hide();
});
What you can do give the button id which is the video id with some prefix or suffix,on play function get the ID of video and embed suffix or prefix and hide that button.
In the below example v_6563228568228 is video id and btn_v_6563228568228 is the button id that is same as video id with prefix of btn_.This way you can provide unique id to your button.
Example.
<div class="col-lg-6">
<video
id="v_6563228568228"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="https://mobamotion.mobatek.net/samples/sample-mp4-video.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<button class="video-play-btn btn" id="btn_v_6563228568228"><i class="fa fa-play fa-play-video-inline"></button>
</div>
<script>
var videoPlayer = videojs('v_6563228568228');
videoPlayer.on('play', function () {
vid_id = $(this).attr('id');
$("#btn_"+vid_id).hide();
});
</script>
I have a problem, I want to add a video by button with source onto playlist. Something like... During the first video plays, there are 3 buttons with mp4 sources. When I click on that buttons, they start playing. Everything works, but I don´t want that thing. I want to make a function when I onclick on a button, video starts playing after the first video. Something like flowplayer - http://flash.flowplayer.org/demos/plugins/javascript/playlist/dynamic.html
function add to position 2.
<body>
<div style="overflow: hidden;">
<video id="video" width="80%" autoplay controls >
<source id="videoSource" src="video/0.mp4" type="video/mp4">
</video>
<a class="btn blue" onclick="changevideo0()">0</a>
<a class="btn blue" onclick="changevideo1()">1</a>
<a class="btn blue" onclick="changevideo2()">2</a>
</div>
<script>
function changevideo0() {
document.getElementById('video').src = "video/0.mp4";}
function changevideo1() {
document.getElementById('video').src = "video/1.mp4";}
function changevideo2() {
document.getElementById('video').src = "video/2.mp4";}
</script>
</body>
I changed your function slightly because it is not efficient to add that many functions just to change one part of it.
Your code was pretty good, just pointing to the wrong element.
function changevideo(source) {
document.getElementById('videoSource').src = source;
}
<body>
<div style="overflow: hidden;">
<video id="video" width="80%" autoplay controls >
<source id="videoSource" src="video/0.mp4" type="video/mp4">
</video>
<a class="btn blue" onclick="changevideo('video/0.mp4')">0</a>
<a class="btn blue" onclick="changevideo('video/1.mp4')">1</a>
<a class="btn blue" onclick="changevideo('video/2.mp4')">2</a>
</div>
</body>
You should consider the following example as logic code, as I have not tested, checked for syntax errors and noor do I know from the top of my head if I should get the length of the video from the source or player element in HTML.
<body>
<script>
var player = document.getElementById("video");
var videolist = {
'video/0.mp4',
'video/1.mp4',
'video/2.mp4'
};
var queuelist = {};
function changevideo() {
if(!queuelist.length == 0){
document.getElementById('videoSource').src = queuelist.shift();
setTimeout(changevideo, player.length * 1000);
} else {
alert("no more video's in queue");
}
}
player.play();
setTimeout('changevideo', player.length * 1000);
</script>
<div style="overflow: hidden;">
<video id="video" width="80%" autoplay controls >
<source id="videoSource" src="video/0.mp4" type="video/mp4">
</video>
<a class="btn blue" onclick="queuelist.append(0)">0</a>
<a class="btn blue" onclick="queuelist.append(1)">1</a>
<a class="btn blue" onclick="queuelist.append(2)">2</a>
</div>
</body>
I'm using the videojs-playlist plugin on top of video.js to play multiple videos on my page. The names of the videos show up, but when I click on the name, it doesn't change the video. Any help would be appreciated. My code is:
<div class="tab-pane" id="product-video">
<div class="embed-responsive embed-responsive-16by9">
<video id="video-playlist" controls preload="metadata"
poster="https://d1gajuxrsak92a.cloudfront.net/uploads/works/0fe589a84faf71cc83088638937e0456c007f39c/icon/1280Screen%20Shot%202014-09-27%20at%2011.46.35%20PM.jpg" class=" video-js vjs-default-skin" >
<!--source src="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8" type="application/vnd.apple.mpegurl" /-->
<source src='https://s3.amazonaws.com/onarbor-previews/uploads/works/7aba13a97d304182e277ca2bdd56c9145678af37/v1/OnarborWriteReviewDemo2.mp4' type="video/mp4">
<source src="https://s3.amazonaws.com/onarbor-previews/uploads/works/7aba13a97d304182e277ca2bdd56c9145678af37/v1/OnarborWriteReviewDemo2.webm" type="video/webm">
<source src='https://s3.amazonaws.com/onarbor-previews/uploads/works/7aba13a97d304182e277ca2bdd56c9145678af37/v1/OnarborWriteReviewDemo2.ogv' type="video/ogv">
</video>
</div>
<div id="video-playlist-vjs-playlist" class='vjs-playlist' style='width:100%'>
<ul>
<li >
<a class='vjs-track' href='#episode-0' data-index='0' data-src='https://s3.amazonaws.com/onarbor-previews/uploads/works/7aba13a97d304182e277ca2bdd56c9145678af37/v1/OnarborWriteReviewDemo2'><!--//note in the data-src's above that there are no file extensions, e.g., .m4v-->
First Casting</a>
</li>
<li >
<a class='vjs-track' href='#episode-1' data-index='1' data-src='https://s3.amazonaws.com/onarbor-previews/uploads/works/3e1f75623064a8aa45bcd66e01f65e1e27736960/v1/onarborScreencast6'><!--//note in the data-src's above that there are no file extensions, e.g., .m4v-->
Second Casting</a>
</li>
</ul>
</div>
</div>
Here is the GitHub for the plugin: https://github.com/tim-peterson/videojs-playlist.
Here is a demo of the plugin for those interested: http://tim-peterson.github.io/videojs-playlist/.