I wanted to make a website with Youtube video iframes, which starts to play on hover.
I've found this post Play youtube video on hover
This code works(video start to play on hover) but not all videos work (links seem to be broken).
The same thing happens when I use other videos so that's not broken links. I've found a post suggesting changing 'iframe' into 'embed' and this fixed broken links but then script stops working.
My script looks like below:
https://codepen.io/EwelinaWoloszyn/pen/dybQGWe
<script>$(document).ready(function(){
var nowPlaying = "none";
$('div').hover(function(){
nowPlaying = $(this).find('embed').attr('src');
$(this).find('embed').attr('src',nowPlaying+'&autoplay=1');
}, function(){
$(this).find('embed').attr('src',nowPlaying);
});
});
What should I change to make it work?
Many thanks in advance,
Neko
God forbid me for using W3Schools, but video elements in HTML5 have play() function in JavaScript
Documentation: https://www.w3schools.com/tags/av_met_play.asp
Your code:
$('div').hover(() => {
$(this).find('embed').play();
});
Related
I've been trying to add a mute/unmute toggle to a banner video on a website I'm working on that uses the DIVI theme by Elegant Themes. I had it playing without the audio muted but it only worked the first couple of times, then it wouldn't play the video at all. I assume this is because of Google's autoplay policy in Chrome?
Anyway, I've tried the code below to create a Mute/Unmute button but it doesn't seem to work, though it works on other snippets I've tried it on.
Page in question is:
http://www.snapperbonanza.co.nz/home-2/
Code is:
jQuery(document).ready(function(){
jQuery(".et_pb_section_video_bg video").prop('muted', true);
jQuery("#mute-video").click( function (){
if( jQuery(".et_pb_section_video_bg video").prop('muted') ) {
jQuery(".et_pb_section_video_bg video").prop('muted', false);
} else {
jQuery(".et_pb_section_video_bg video").prop('muted', true);
}
});
});
Any help would be greatly appreciated :)
Two problems:
Use window load rather than document ready.
I needed to set the volume to 1. It still would not unmute because volume is also set to 0.
In this code I have a font awesome icon toggling for mute/unmute as well:
jQuery(window).load(function() {
jQuery("video").prop('volume', 1);
jQuery("#mute-video").click(function () {
jQuery("video").prop("muted", !jQuery("video").prop("muted"));
jQuery("#mute-video .fa-volume-mute").toggle();
jQuery("#mute-video .fa-volume-up").toggle();
});
});
The code to add a download button to the player can be found in the following post:
JWPlayer 5 - How to add download link at the player
However, I want to add an anchor below the player, which will hold the link to the video. I tried several things but I can't figure it out.
For example, i have tried the following:
<a href="window.location.href = player.getPlaylistItem()['file']"
class="button">Download</a>
I have even tried to make it work with a button:
<button onclick="function()">Download</button>
But it still does not work.
I have added all my tested codes here: https://jsfiddle.net/au50sk8c/
I hope someone can help me.
Thank you.
Since you already have the link to the video adapt your script as follows:
let videoUrl = "the link to your video";
document.querySelector('#idOfLink').href = videoUrl;
//also adapt this line
playlist: [{"sources":[{"type": "video/mp4", "label": "HD", "file": videoUrl}]
I integrated Vimeo Video in my site and I used 'background= 1' parameter in query string to remove all the default functionalities but it cause a problem that my Video get muted when it loads and I want to unmute the video on page load.
I am beginner so please Give me some good and simple solution keeping in mind that background = 1 should stay there.
Here is what I tried so far:
<script>
var dynamicContent = getParameterByName('background');
$(document).ready(function() {
if (dynamicContent=='1') {
$('#vi-video-1-container').attr('data-audio-volume', 1);
$("#vi-banner-video").vimeo("setVolume", 1);
}
});
</script>
Trying to call the vimeo api to pause video on a click event to hide it. And, on clicking to reveal the video again, play the video from its paused position.
There are various related questions on here, I can't find an answer to the simple "how to pause". I'm a jquery novice and can't make heads or tails of the froogaloop documentation.
Here's a FIDDLE, and my current jquery script to hide the video
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) {
$('#video').hide();
}
});
which hides it when an element without the "click" class is clicked. But the video plays on in the background. Froogaloop is loaded in the fiddle. Thanks everyone
Here's an updated FIDDLE that makes pause/play work as I'd imagined. Click the image to play the video; click outside or on empty space (you control this with classes) to pause it; click image again to play from paused position. Simple, no buttons, no excess jquery or froogaloop code.
Putting this here for those who might benefit from it. And a +1 to mbrrw for getting me started.
var iframe = $('#video iframe')[0];
var player = $f(iframe);
$('.showvideo').on('click', function(){
$('#video').show();
$('.image').hide();
player.api('play');
});
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
$('#video').hide();
$('.image').show();
player.api('pause');
}
});
Remember to append api=1 to the vimeo link. And the url must be https, not http.
froogaloop can be a pain in the arse.
The code to get you started is here:
https://developer.vimeo.com/player/js-api#universal-with-froogaloop
I've adapted that to get it working i think how you expect here:
https://jsfiddle.net/fLe5xs4v/
Setting it up like so:
var iframe = $('#video iframe')[0];
var player = $f(iframe);
Note that if you change the text in the play and pause buttons you will break this code:
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
Give it a shot it should get you going in the right direction at least. Good luck!
i'm working on adding a video to the home page of a site i'm working on. ideally, i'd like to show the youtube version by default, and add a button underneath that says something like "don't have access to youtube? click here to watch an alternate version".
once clicked, a different player will load into the same video div and replace the youtube version.
we have the video uploaded to youtube, and also have an html5 version on the site that is played via the video.js plugin for wordpress.
how can i load the alternate html5 video player into the div via a button click (without refreshing the page if possible)? i'm assuming this can be done via javascript / jquery / ajax somehow, but I'm not sure how to do this (my js level is novice).
thanks!!
You can clear the div out with:
$("#yourDivID").empty()
Then populate the div with new content
var newHtml = "Whatever you want!"
$("#yourDivID").append(newHtml);
Or
$("#yourDivID").html(newHtml);
Here's a very primitive example of replacing content in a Div: http://jsfiddle.net/FJuwd/
Html
<div id="myvideodiv"> </div>
In script
mybutton.click(function(){
playerMethod("myvideodiv").setup({ //here player intializations based on sepecific type
file: "/uploads/example.mp4",
height: 360,
image: "/uploads/example.jpg",
width: 640
});
})
see example here.
jQuery solution: Just create div and populate with video on button click. Many ways to do this. The check for length is only there to eliminate putting another video up.
<div id="player"><div>
<button id="clickme">Click to play video</button>
$("#clickme").on("click", function(e) {
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv' width='320' height='240' controls></video>");
mydiv.append(myvideo);
}
});
See example
thanks so much everyone for all of the help. love this place.
i was actually able to work this out more easily by just toggling divs that contain the two different videos. not sure why i didn't think of this initially. doesn't actually remove the content, just hides it, but i think it will work for me.
html
<div id="youtube">my youtube vid</div>
<div id="html5" style="display:none;">my alternate vid</div>
<input type="button" value="switch video" id="click"/>
jquery
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
});
});
i also tried this with the js, so the youtube video would be removed & stop playing when the divs are toggled
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
$('#youtube').empty();
});
});
this works, but i wasn't sure how to add the youtube video back when toggling back. not really a big deal - just something i was curious about. i'm assuming it can be done with .append.
problem with this is that both of the vids exist in the wordpress page as shortcodes, so it complicates things a bit. i just wrapped the shortdoces in divs with these ids in the wordpress page to get the toggle working, and added the js to my page template. thx again!