jQuery(document).ready(function($){
var image = new Array ();
image[0] = "/08/anek-ferry-traghetti-grecia.mp4";
image[1] = "/12/Composizione-2.mp4";
image[2] = "/11/Composizione-1.mp4";
var hasard = Math.floor(Math.random() * image.length);
$('#fond-aleatoire video').attr('src', 'http://neos.anekitalia.com/wp-
content/uploads/2018' + image[hasard]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id class="fond-aleatoire">
<mediaelementwrapper id="mejs_8947924178991862">
<video loop="loop" autoplay="" playsinline="" muted="" width="1920"
height="600" src="http://neos.anekitalia.com/wp-
content/uploads/2018/11/Composizione-1.mp4"
id="mejs_8947924178991862_html5"
preload="none" style="margin: 0px; width: 1903px; height: 594.688px;">
<source type="video/mp4" src="http://neos.anekitalia.com/wp-
content/uploads/2018/11/Composizione-1.mp4">
</video>
</mediaelementwrapper>
</div>
I have the following code that is working on all browsers but not in safari
this is simply changing randomly the default video background of my wordpress site when the background has ID #fond-aleatoire, any suggestion how to fix this on safari? many thanks.
Related
I have a question please I got an HTML playing video on hover but once I go away with the mouse I got a hide video function, what I try to do is once I leave the mouse from the playing video to show the placeholder image again something like an Overlay on top of the video. I hope someone can please help me with this.
Here is a live example of the code https://jsfiddle.net/the_nexi/514pwkeo/2/
Thanks in advance
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); });
$(this).on("mouseout", function() { hideVideo(i); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If you hover over this Thumbnail the Video will start but once you move the mouse away from the image the Thumbnail (Poster) should appear again with an Overlay this is what I try to do.</p>
<div class="video">
<video class="thevideo" loop muted preload="auto" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", hoverVideo);
$(this).on("mouseout", hideVideo);
});
});
function hoverVideo() {
$(this).find(".overlayImage").hide();
$(this).find(".thevideo")[0].play();
}
function hideVideo(video) {
$(this).find(".thevideo")[0].currentTime = 0;
$(this).find(".thevideo")[0].pause();
$(this).find(".overlayImage").show();
}
* {
font-family: sans-serif
}
.video {
position: relative;
width: 320px;
}
.overlayImage {
position: absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="http://hdwarena.com/wp-content/uploads/2017/04/Beautiful-Wallpaper.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/rWaXO67Bipm9mgo7/videoblocks-4k-footage-disco-lights-as-an-abstract-colored-animated-background-or-wallpaper-light-leaks_sl5jole0z_thumbnail-small01.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/BxWKHw2nWj8nx9c2x/videoblocks-red-wallpaper-slider_rxlvi6ltb_thumbnail-small11.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
In this, every video is separate from each other, allow me to explain why:
I changed the way you set the functions for the events mouseover and mouseout and now they are event functions.
Inside the functions hoverVideo() and hideVideo(), we hide the image and play the video using $(this) which is passed through the $.on() as the correspondent video div and find the elements (video and image) with $.find().
Optional: I added the width:320px in the css because it was somewhat annoying that it continued playing the video outside of the video because of the bigger width.
If you want you can get rid of the class tags, and use the $.find() function like this, for example:
$(this).find("video")[0].currentTime = 0;
$(this).find("video")[0].pause();
$(this).find("img").show();
In this way it will find every video element inside the div with the .video class and do the rest from there, the same for img.
I hope this code helps you.
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); $(this).find(".overlayImage").hide(); });
$(this).on("mouseout", function() { hideVideo(i); $(this).find(".overlayImage").show(); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
.video {
position:relative;
}
.overlayImage {
position:absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
I hope this updated code help you
For my website, I wanted a specific video to play, once a condition is met.
e.g (If x = 1, play the video)
I have this code in the HTML file:
<div id="video">
<video width="320" height="240" autoplay,>
<source src=video_mp4 type="video/mp4">
<source src=video_ogg type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
And in the JavaScript file:
document.getElementById("video").innerHTML.source.src = video_mp4;
document.getElementById("video").innerHTML.source.src = video_ogg;
But it doesn't seem to work.
You can use the following :
<video id="video1" src="vid.mp4"></video>
<script>
function playVideo(){
var video= document.getElementById("video1");
video.load();
video.play();
}
</script>
Is it possible to set a video to full screen on page load?
So far, the only answer I could get to work and was actually logical to me was setting the width and height on the element via CSS.
var $pop = Popcorn("#video");
$pop.play();
console.dir( $pop )
html{font-family:arial;}
#video{width:100%;height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
I use Popcorn.js for playing the video on startup.
I am aware of setting CSS classes from JavaScript. The thing I'm more interested in would be the question: is there is a JavaScript based method to call, to maximize the video to full screen (on startup).
Using JavaScript, as suggested by Will, I also can't seem to get it to work properly
var video = $("#video");
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
html{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
HTML:
<div class="source" id="source_one" onclick="chnageToSourceTwo()">
Source 1
</div>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360" poster="" data-setup="{}">
<source src="example_video_1.mp4" type='video/mp4' />
</video>
Script:
function chnageToSourceTwo() {
document.getElementById("example_video_1").src="example_video_2.mp4";
}
The video source is not changing after clicking on div. I am using the Video.js plugin to add video player to my webpage.
Does anyone know how to change source of video onclick?
jsFiddle http://jsfiddle.net/ah1fj7te/
It would be easier is to give your <source> object an ID. and reference the object by the ID using document.getElementById and document.addEventListener
Change your HTML:
<div class="source" id="source_one">Source 1</div>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360" poster="" data-setup="{}">
<source id="source_video" src="example_video_1.mp4" type='video/mp4' />
</video>
<script>
document.getElementById('source_one').addEventListener('click', function() {
document.getElementById('source_video').src = 'example_video_2.mp4';
});
</script>
Change this line:
document.getElementById("example_video_1").src="example_video_2.mp4";
With this:
document.getElementById("example_video_1").getElementsByTagName('source')[0].src="example_video_2.mp4";
I noticed you tagged this as jQuery, so here is how you would implement this in jQuery.
$("#example_video_1 source").attr("src", "example_video_2.mp4");
Here is a DEMO
And here some code:
var a = document.getElementById('source_one');
a.addEventListener('click',function() {
document.getElementById("example_video_1").children[0].src="example_video_2.mp4";
a.innerHTML = 'Source 2';
alert(document.getElementById('example_video_1').children[0].src); // just to show that it is changed...
});
If you want to be able to toggle both videos, use this:
DEMO
var a = document.getElementById('source_one');
var b = document.getElementById("example_video_1");
a.addEventListener('click',function() {
if (document.getElementById("example_video_1").children[0].src == 'http://fiddle.jshell.net/_display/example_video_2.mp4') // replace with real url
{
document.getElementById("example_video_1").children[0].src="example_video_1.mp4";
a.innerHTML = 'Source 1';
}
else {
document.getElementById("example_video_1").children[0].src="example_video_2.mp4";
a.innerHTML = 'Source 2';
}
});
I have a few lines of Javascript that define a custom 'play' button for HTML5 video.
The issue I have is that they work fine for one video, and for one video only. I want to have several videos on my page with the same Javascipt code affecting all of them. So that the play button works individually on each video. At the moment it only works on the first video listed in HTML.
How do I make this work?
JS
var vid, playbtn;
function intializePLayer(){
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
playbtn.addEventListener("click",playPause,false);
}
window.onload = intializePLayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.opacity = '0';
}else{
vid.pause();
playbtn.style.background = "url('http://i61.tinypic.com/xm8qdu.png')";
playbtn.style.backgroundSize = "105px 105px";
playbtn.style.opacity = '1';
}
}
CSS
#video_container{
position:relative;
width:480px;
height:264px;
}
button#playpausebtn{
background:url('http://i61.tinypic.com/xm8qdu.png') no-repeat;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
border:none;
outline:none;
width:105px;
height:105px;
cursor:pointer;
background-size: 105px 105px;
}
HTML
<!-- Video #1 -->
<div id="video_container">
<button id="playpausebtn"></button>
<video id="my_video" width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<!-- Video #2 -->
<div id="video_container">
<button id="playpausebtn"></button>
<video id="my_video" width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
This approach will help you have one->n videos. In the fiddle we first search the DOM for elements with a class name of playpausebtn, then add an onclick listener for each. This listener takes the video object (which has to be directly after the button in this case, you could change this code to use an incrementing id e.g. video_1, video_2 etc and find the video objects that way) and adds it to the onclick event listener.
This is only one approach, but it is a way to resolve your issues - please ask questions if there is anything you don't understand.
http://jsfiddle.net/tL5ZU/1/
HTML:
<!-- Video #1 -->
<div>
<button class="playpausebtn">Play</button>
<video width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
<!-- Video #2 -->
<div>
<button class="playpausebtn">Play</button>
<video width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
JS
//set up listeners for buttons
function init() {
//get all buttons
var buttons = document.getElementsByClassName('playpausebtn');
//for each button set up the onclick listener
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = (function () {
//the video needs to be right after the button
var video = buttons[i].nextSibling.nextSibling;
return function () {
if (video.paused) {
video.play();
} else {
video.pause();
}
};
})();
}
}
init();