I have this function and I would like to know how to make this work with jQuery.
My HTML:
<video id="mainVideo" width=320 height=240 autoplay>
</video>
<br/>
<video class="thumbnail" width=100 height=100>
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
</video>
<video class="thumbnail" width=100 height=100>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
This is the function:
var videos = document.querySelectorAll(".videoThumbnail");
for(var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
}
function clickHandler(e) {
var mainVideo = document.getElementById("mainVideo");
mainVideo.src = e.srcElement.currentSrc;
}
This is my solution, in the future post your HTML code for helping us to solve the problem:
$(function(){
$('.thumbnail').click(function(){
$('#mainVideo').replaceWith('<video id="mainVideo" width=320 height=240 autoplay></video>');
$('#mainVideo').html($(this).html());
});
});
Here is the fiddle
The code already works with jQuery, so there is no conversion necessary to make it functional.
That said, here is a more typical way to do this with jQuery:
var mainVideo = $("#mainVideo");
$(".videoThumbnail").click(function() {
mainVideo.prop("src", this.srcElement.currentSrc);
});
Related
I'm designing a page where i want the video for each post to play when the user hovers the post. I've set it up like this:
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<source src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
$(document).ready(function() {
$(".playonhover").on("mouseover", function(event) {
this.play();
}).on('mouseout', function(event) {
this.pause();
});
})
</script>
This works, but I actually want the video to play when the top div (class .project-link-block) is hovered, not the video itself. Is there any way to do this? Switching the class in the JS didn't work. Using Webflow for this, in case it's relevant.
Did you also change this when you switched the class? Once you switch the class, the video element is no longer this.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover" height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<source
src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e"
type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
$(document).ready(function () {
$(".video-cover").on("mouseover", function (event) {
$(".playonhover").get(0).play();
}).on('mouseout', function (event) {
$(".playonhover").get(0).pause();
});
})
</script>
See if this code below achieves your expected result. Then convert to JQuery (if required).
<!DOCTYPE html>
<html>
<body>
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<!-- <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> -->
<source type="video/mp4"
src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e"
>
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
window.addEventListener( "load", on_documentReady );
function on_documentReady()
{
//const myTargets = document.getElementsByClassName("playonhover");
const myTargets = document.getElementsByClassName("project-link-block");
for (var i = 0; i < myTargets.length; i++)
{
myTargets[i].onmouseover = handle_mouseOver;
myTargets[i].onmouseout = handle_mouseOut;
}
}
function handle_mouseOver( evt )
{
//alert( "## was rolled over" );
evt.target.play();
}
function handle_mouseOut( evt )
{
//alert( "## was rolled out" );
evt.target.pause();
}
</script>
</body>
</html>
How to make videos play automatically from many videos using dynamic dom arrays?
At the moment I am still using the html video element manually instead of the javascript array.
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
var imagen1 = document.getElementById('imagen1');
function imgTransition(){
imagen1.style.opacity=0;
video1.play();
video1.style.opacity=1;
}
video1.onended = function(){
video2.play();
video1.style.opacity=0;
video2.style.opacity=1;
}
video2.onended = function(){
video3.play();
video2.style.opacity=0;
video3.style.opacity=1;
}
video3.onended = function(){
video3.style.opacity=0;
imagen1.style.opacity=1;
window.setTimeout(imgTransition, 5000);
}
*{padding:0;margin:0}video{width:100%;height:100%;position:absolute;object-fit:cover;transition:all 1.2s linear;z-index:-10}.video1{opacity:1}.video2{opacity:0}.video3{opacity:0}.imagenes{opacity:0;transition:opacity 2s;width:100%;height:100%;position:absolute;object-fit:cover;z-index:-10}.container{width:100%;height:100%}
<div class="container">
<video autoplay id="video1" class="video1">
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4">
</video>
<video id="video2" class="video2">
<source src="https://hunzaboy.github.io/Ckin-Video-Player/ckin.mp4" type="video/mp4">
</video>
<video id="video3" class="video3">
<source src="https://www.cssscript.com/demo/vanilla-js-custom-html5-video-player-pureplayer/360.mp4" type="video/mp4">
</video>
<img src="transition.gif" class="imagenes" id="imagen1">
</div>
How to make videos play automatically from many videos using dynamic dom arrays?
How to dynamic the function:
video.onended = function(){..} ?
Before i start, i'm sorry if i belong is repost. But, i still not get the answer after check the previous thread.
i try to change source of video with onclick button. But, the video still same although the source has changed.
<video width="560" height="320" controls="controls" preload="none">
<source id="myVideo" src="/video1.mp4" type="video/mp4">
<track id="mySubtitle" src="/Subtitle1.srt" kind="subtitles" srclang="id" label="Indonesian" default>
</video>
<button onclick="myFunction1()">Change Video 1</button>
<button onclick="myFunction2()">Change Video 2</button>
<script>
function myFunction1() {
document.getElementById("myVideo").src = "/video2.mp4";
document.getElementById("mySubtitle").src = "/Subtitle2.srt";
}
function myFunction2() {
document.getElementById("myVideo").src = "/video3.mp4";
document.getElementById("mySubtitle").src = "/Subtitle3.srt";
}
</script>
The source has success changed, but video still same.
Anyone have an idea?
Try this:
<script>
function myFunction1() {
document.getElementById("myVideo").setAttribute("src", "/video2.mp4");//Set src attribute
document.getElementById("mySubtitle").setAttribute("src", "/Subtitle2.srt");//Here too
}
function myFunction2() {
document.getElementById("myVideo").setAttribute("src", "/video3.mp4");//And here
document.getElementById("mySubtitle").setAttribute("src", "/Subtitle3.srt");//Same
}
</script>
This should work perfectly.
When you change the src of the <source> element, it doesn't change the src of the <video> element. You have to call its load method :
function myFunction1() {
document.getElementById("myVideo").src = "http://media.w3.org/2010/05/bunny/movie.mp4";
// document.getElementById("mySubtitle").src = "/Subtitle2.srt";
document.querySelector('video').load();
}
<button onclick="myFunction1()">Change Video 1</button>
<video width="560" height="320" controls="controls" preload="none">
<source id="myVideo" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<!--<track id="mySubtitle" src="/Subtitle1.srt" kind="subtitles" srclang="id" label="Indonesian" default>-->
</video>
I have three videos that I am trying to detect when they end, and then navigate to another page.
The function seems to only work for the first video $vid1 and nothing happens to the $vid2 and $vid3 videos.
I came across this question, and sourced my code from there.
(I noticed in a comment that it stated that the 'correct' answer doesn't work in chrome)
How would I go about making this work for all videos?
JS
//variables
var $vid1 = document.getElementById("vid1");
var $vid2 = document.getElementById("vid2");
var $vid3 = document.getElementById("vid3");
//functions
function Redirect1() {
window.location.replace('ExamplePage1');
}
function Redirect2() {
window.location.replace('ExamplePage2');
}
function Redirect3() {
window.location.replace('ExamplePage3');
}
//events
$vid1.addEventListener("ended", Redirect1, false);
$vid2.addEventListener("ended", Redirect2, false);
$vid3.addEventListener("ended", Redirect3, false);
HTML
<div class="videoResult vidOne">
<video id="vid1" controls>
<source src="#" type="video/mp4">
</video>
</div>
<div class="videoResult vidTwo">
<video id="vid2" controls>
<source src="#" type="video/mp4">
</video>
</div>
<div class="videoResult vidThree">
<video id="vid3" controls>
<source src="#" type="video/mp4">
</video>
</div>
May be, try this?
//functions
function Redirect1() {
window.location.replace('./ExamplePage1');
}
function Redirect2() {
window.location.replace('./ExamplePage2');
}
function Redirect2() {
window.location.replace('./ExamplePage3');
}
Here is my javascript on loading of video.
var vid = $("#video");
$("#video").on("load",function() {
if ( vid[0].ReadyState === 4 ) {
console.log("loaded video!");
console.log(vid);
vid.fadeIn();
}
});
I want to play my video everytime the video div refreshes after .load() runs. How do i loop this until readyState == 4? I tried using on("canplaythrough") but this is never recognized as a function...
Make sure you set preload="auto" (and don't use autoplay) in the tag, then you can use the canplay event:
var vid = $("#video");
vid.on("canplay", function() {
vid[0].play();
vid.fadeIn(1000);
});
$("#change").on("click", function() {
vid.hide();
vid[0].src = "http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" width="500" height="280" preload="auto" style="display:none">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="change">Change source (mp4 only for this example)</button>