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/.
Related
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.
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'm terrible at JS and I've tried dozens of thing to make this work, but nothing seems to work for me.
I want AUDIO1 file to play and AUDIO2 file to pause automatically when certain div element has "elementor-active" class, and vice versa.
Any help appreciated.
Here's my code:
<div id="elementor-tab-title-1601" class="elementor-active">TAB 1</div><div id="elementor-tab-title-1602" class="">TAB 2</div>
<div id="TAB1" class="active" style="display: block;">
<audio id="AUDIO1" loop="loop">
<source src="http://localhost/test/wp-content/uploads/2018/06/audio1.ogg">
<source src="http://localhost/test/wp-content/uploads/2018/06/audio1.mp3" type="audio/mpeg">
</audio></div>
<div id="TAB2" class="">
<audio id="AUDIO2" loop="loop">
<source src="http://localhost/test/wp-content/uploads/2018/06/audio2.ogg">
<source src="http://localhost/grad/wp-content/uploads/2018/06/audio2.mp3" type="audio/mpeg">
</audio>
</div>
For example:
var audio_one = new Audio('PATH_TO_AUDIO_1');
var audio_two = new Audio('PATH_TO_AUDIO_2');
var timerId = setInterval(function() {
if ($('YOUR_BLOCK_SELECTOR').hasClass('active')) {
audio_one.play();
audio_two.pause();
} else {
audio_one.pause();
audio_two.play();
}
}, 250);
I have a page setup with links that hide/show divs. The last link is a contact form. Contact forms are super messy with code so I wanted to load the file externally
I found many snippets on simply loading html into div with jquery. But the issue is I already have jquery setup to show and hide the divs
How can I have the contact link show the contact div and also load the external contact form into it?
$(document).ready(function () {
$('.menu').click(function () {
var $clicked = $(this)
$('.menu').each(function(){
var $menu = $(this);
if (!$menu.is($clicked))
{
$($menu.attr('data-item')).hide();
}
});
$($clicked.attr('data-item')).toggle();
});
$(".contactmenu").click(function(){
$("#menu-contact").load("contactform.htm");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header>
<div align="center" class="logoclass" id="logo"><img src="media/logo.png"/></div>
<div id="topmenu">
Home
Videos
Follow
Contact
</div>
</header>
<article>
<div id="bodycontent">
<div id="menu-contact" style="display: none">Contact</div>
<div id="menu-follow" style="display: none">Follow</div>
<div id="menu-videos" style="display: none"><br />
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
<div id="menu-home" style="display: none">..</div>
</div>
</article>
contactmenu class doesn't exist, try:
$("#contact-menu-item").click(function(){
I have a list of images and when the image is clicked, I need to do an ajax URL call and validate some parameters.
If the validation is okay, I will have to show the fancybox else I should display another fancybox.
My Issue:
When I click on the image and if the validation is false the other fanybox displays as expected. But if the validation is true, Firebug throws an error saying "too much recursion".
PS:: The expectations is that a video.js player will be shown if the validation is true.
HTML Sample:
<a id="videolink" href="#1" title="Test">
<img class="vidimg" src="1.png" videoId="1" width="180" height="180" />
</a>
<div style="display:none">
<video id="1" poster="1.png" class="video-js vjs-default-skin">
<source src="1362993728.mp4" type='video/mp4'>
<source src="1362993728.webm" type='video/webm'>
<source src="1362993728.ogv" type='video/ogg'>
</video>
</div>
jQuery:
$("a#videolink").click(function(){
$videoId = $(this).children("img.vidimg").attr("videoId");
$isValid = "true" or "false" ; // validation using .ajax() call
if($isValid == 'true'){
$(this).fancybox().click();
}else{
$("#myModal").fancybox().click()
}
});
The "too much recursion" is shown on the line by Firebug:
$videoId = $(this).children("img.vidimg").attr("videoId");
The other fanybox content to be displayed in case of "false":
<div style="display:none">
<div id="myModal"> Invalid Item</div>
</div>
The below changes helped me to have this work as expected.. (there are still some issues in having the fancybox video play).
HTML Sample:
<div style="display:none">
<div id="1">
<video poster="1.png" class="video-js vjs-default-skin">
<source src="1362993728.mp4" type='video/mp4'>
<source src="1362993728.webm" type='video/webm'>
<source src="1362993728.ogv" type='video/ogg'>
</video>
</div>
</div>
jQuery:
$("img.vidimg").click(function(){
$videoId = $(this).attr("videoId");
$isValid = "true" or "false" ; // validation using .ajax() call
if($isValid == 'true'){
$('#' + $videoId ).fancybox().click();
}else{
$("#myModal").fancybox().click()
}
});
Any comments on this related to performance or bad code practice with reference to this code?
I will create a new question here for the video player issue. After this change, the video does not play. :(