I wrote a small code using videojs library which plays ads video before playing actual video. I wanted a div tag which should appear on ad video and it works just fine the only problem is when the video goes fullscreen the label doesn't show up.
Here's my html code
<div class="videoContainer">
<video id="video_1" class="video-js playads" height="200px" width="300px" video-url="http://vjs.zencdn.net/v/oceans.mp4" mimetype="video/mp4" controls controlsList="nodownload" preload="none" data-setup=''>
<!-- ad source ad ad video url -->
<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4' />
</video>
<!-- text to be displayed while playing ad -->
<div class="advertisement hide">Advertisement</div>
</div>
CSS Code:
.videoContainer {
max-width: 300px;
position: relative;
margin: 20px auto 0;
}
.advertisement{
position:absolute;
color: rgb(230, 200, 98);
padding: 5px 10px;
text-align: right;
background: rgba(0, 0, 0, 0.4);
bottom: 50px;
right:0;
font-size: 14px;
font-weight: 700;
z-index: 1 !important;
}
.hide{
display:none;
}
And Javascript Code is:
$(document).ready(function(){
var videotag = $('.playads');
var myPlayer = videojs('video_1');
// show advertisement label while play advertisement
myPlayer.on('play', function() {
if(myPlayer.hasClass("playads")){
$('.advertisement').removeClass('hide');
}
});
// Stop from seeking while playing advertisement
myPlayer.on("seeking", function(event) {
if (currentTime < myPlayer.currentTime() && myPlayer.hasClass("playads")) {
myPlayer.currentTime(currentTime);
}
});
myPlayer.on("seeked", function(event) {
if (currentTime < myPlayer.currentTime() && myPlayer.hasClass("playads")) {
myPlayer.currentTime(currentTime);
}
});
setInterval(function() {
if (!myPlayer.paused() && myPlayer.hasClass("playads")) {
currentTime = myPlayer.currentTime();
}
}, 1000);
// Hide Advertisement label and change data-src of player to play actual video
myPlayer.on('ended', function() {
if(this.hasClass("playads")){
this.src({type: videotag.attr('mimetype'), src: videotag.attr('video-url')});
this.play();
this.removeClass('playads');
$('.advertisement').addClass('hide');
}
});
});
what am i missing here? is it videojs?
Here is a link to my pen:
https://codepen.io/isheikhspear/pen/RjMOgw?editors=0010
This can be accomplished by moving your argument inside of video.js's wrapper. So your new HTML would be:
<div class="videoContainer">
<!-- Add some extra attribute as video-url and mimetype which we can later play once we are done playing ads -->
<video id="video_1" class="video-js playads" height="200px" width="300px" video-url="http://vjs.zencdn.net/v/oceans.mp4" mimetype="video/mp4" controls controlsList="nodownload" preload="none" data-setup=''>
<!-- ad source ad ad video url -->
<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4' />
</video>
<!-- text to be displayed while playing ad -->
<div class="moveToVideoJs">
<div class="advertisement hide">Advertisement</div>
</div>
</div>
After initializing your video.js, you should then move your div that contains stuff we want to move to video.js to video.js.
$(".moveToVideoJs")
.appendTo($('#video_1'));
Here's a link to the new CodePen.
Related
I was wondering if this is possible :
I have a movie with a Play button.
After click, the movie begins to play.
When the movie finish, I have a picture which cover my movie div.
Which options to use in my function:
<video src="video.com" id="myVideo">
</video>
<div class="images">
<img scr="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
const img = document.querySelector("img")
const video = document.querySelector("video")
function myHandler(e) {
// now the video has to hide, and show the img:
video.style.display = "none:
img.style.display = "block"
}
</script>
There are various options, including replacing the <video> tag with an <image> tag.
The easiest one I can think of is to have the image on a layer under the video, then when the video finishes, you can change layers (put image as the front layer and now video in the back layer).
When image is under the video, it has same size and position so to end-user it's invisible. This is set through the <style=> part where z-index is the layer position (higher number puts it above others of a lower number). The top and left options are the positions of up/down and left/right settings.
You can try using: (in the code below, I change their positions (not aligned) so you can see what is happening)...
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="550" height="400" controls style=" z-index: 2; top: 50px; left: 100px; position: absolute; );">
<source src="some_video.mp4" type="video/mp4">
</video>
<div id="myPic" class="images" width="550" height="400" style=" z-index: 1; top: 80px; left: 140px; position: absolute; );">
<img src="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
const img = document.getElementById('myPic');
const video = document.getElementById('myVideo');
function myHandler(e)
{
// now the video has to hide, and show the img:
//video.style.display = "none:
//img.style.display = "block"
//# swap their layer positioning
img.style.zIndex = "2"; //# makes top
video.style.zIndex = "1"; //# makes bottom
}
</script>
</body>
</html>
I'm not sure if there's something else to it other than simply showing an image when the video is not playing, if that's not the case, the video tag has a poster attribute:
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I have a question about how to play / stop the video when I mouse over. The user placed the mouse over the image and the video started playing in the place of the image, and when it was moved, the image returned and the video disappeared. Is it possible and how? I tried something but I have not got what I want.
$(document).on('ready', function() {
$('.image').on('mouseover', function() {
$('.video-preview').toggleClass('video-preview-show');
})
})
.image img {
width: 272px;
height: 160px;
}
.video-preview {
width: 272px;
}
.video-preview {
display: none
}
.video-preview-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
<img src="https://content.active.com/Assets/Active.com+Content+Site+Digital+Assets/Cycling/Galleries/Cyclists+Should+Never+Do/cyclist-front.jpg">
</div>
<video class="video-preview lazy-hidden" playsinline="" autoplay="" muted="" loop="" width="100%" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
View on Codepen
Try with this
<div onclick ="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video width="400px" height="auto" muted id="video1" onmouseover="this.play()" onmouseout="this.pause()">
<source src="http://mazwai.com/system/posts/videos/000/000/140/preview_mp4_2/joel_gerlach--rain-shot_in_los_angeleswith_the_panasonic_gh4.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
Try the below code. This will help you
$('.image').hover(function() {
$('.video-preview').addClass('video-preview-show');
},
function() {
$('.video-preview').removeClass('video-preview-show');
});
I am trying to play video while hovering over images at the same div in my website's img-gallery but obviously i am doing something wrong.
The supposingly hidden image over which the video should play on mouseover starts trempling.
I think its something obvious but i don't have enough experience to solve it.
Is there any idea how to hide the image at hovering for good?
Here is the code:
HTML
<div id="container">
<div class="viewer">
<img class="thumb" target="#video_1" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_1" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" target="#video_2" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_2" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" target="#video_3" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_3" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
</div>
CSS
.viewer {
width: 530px;
height: 290px;
display:inline-block;
}
video {
width: 100%;
height: 100%;
position: relative;
display: none;
}
JS
$(document).ready(function() {
$('.thumb')
.mouseover(function() {
$(this).hide();
var myVid = $(this).attr('target');
$( myVid ).show().trigger('play');
})
.mouseout(function() {
$('video').trigger('pause').hide()
$(this).show();
});
});
Here is also a saved [PEN]:https://codepen.io/anon/pen/oEwRJQ
The issue with your code is because you're hiding the .thumb element in the mouseover event which immediately triggers the mouseout event which shows it again. This causes a loop of hiding/showing which results in the flickering you see.
To fix this, hook the event to a parent element of both the thumb and the video. That way you don't need to use the non-standard target attribute and can instead find the related video element using DOM traversal, making the code more extensible and robust. You can also use the mouseenter and mouseleave events to prevent any possible flickering when near the edges of the hit area.
$(function() {
$('.viewer').mouseenter(function() {
var $el = $(this);
$el.find('.thumb').hide();
$el.find('video').show()[0].play();
}).mouseleave(function() {
var $el = $(this);
$el.find('.thumb').show();
$el.find('video').hide()[0].pause();
});
});
.viewer {
width: 530px;
height: 290px;
display: inline-block;
}
video {
width: 100%;
height: 100%;
position: relative;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_1" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_2" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_3" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
</div>
$(document).ready(function() {
$('.viewer').each(function(){
var $this = $(this);
$this.mouseover(function() {
$(this).find('.thumb').hide();
$('video', $this).show().trigger('play');
})
$this.mouseout(function() {
$('video', $this).trigger('pause').hide()
$(this).find('.thumb').show();
});
});
});
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();
I'm making an interactive world map gif, using javascript and html5, here is my code so far:
<!DOCTYPE html>
<html>
<head>
<title>World Map</title>
<body>
<p>Click on a clickable area of the map for more info.</p>
<img src ="worldmap.gif" width="576" height="307" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="265,49,279,64" href="
but now I'm stuck, firstly i want to know how to link to a video within the html5 video tags, upon the clicking of the linked coordinates, and also how to set javascript parameters within this, such as swapping videos etc. I have the code to be able to do the swap with the videos once the link is clicked, and I have the code to do the coordinates, I just don't know how to put it together.
Thanks so much for you help, but want to keep it super simple using the method i've done and kind of understand (if it works) here is my super simple code
<!DOCTYPE html>
<html>
<head>
<title>World Map</title>
<body>
<p>Click on a clickable area of the map for more info.</p>
<img src ="worldmap.gif" width="576" height="307" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="265,49,279,64" <video src="ukanthem.mp4"></video>
</map>
</body>
</head>
</html>
the map opens on the page, but the clickable area does not appear to be there?
UPDATE:
So the coordinates still don't work, there is no area to click
also the video's appear on the same page as my map, I would like them on a seperate page, any help? also the video's aren't recognised, it says "video cannot be found, may have been removed from the server. http 404"
World Map
Click on a clickable area of the map for more info.
<map name="worldmap">
<area shape="rect" coords="265,49,279,64" onclick="playVideo()">
<video id="video1" class="true" autoplay controls width="420">
<source src="ukanthem.mp4" type="video/mp4">
<source src="ukanthem.mp4" type="video/ogg">
</video>
<video id="video2" class=flase" width="420" controls>
<source src="beef.mp4">
</video>
<button id="hideButton" onclick="swap();">Switch</button>
<script>
var flag=true;
function swap() {
var myVideo1=document.getElementById("Video1");
var myVideo2=document.getElementById("video2");
flag=!flag;
video1.setAttribute("class", flag);
video2.setAttribute("class", !flag);
if (flag) {
video2.pause();
video1.play();
} else {
video1.pause();
video2.play();
}
}
</script>
</map>
</body>
</head>
</html>
Look at my code again please :)
Ok super simple.
You can put an Onclick action to your area tag.
Like this.
<area .... onclick="playVideo()">
And for your HTML 5 video tag...
<video id="video1" width="420">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
And a Javascript to do things for you:
This part is for the normal HEAD HTML tag <-------
<script>
function playVideo() {
var myVideo=document.getElementById("video1");
myVideo.play();
}
</script>
If you want it super easy this is super easy, and i havent used any jquery, or new stuff. Let me know how it goes :)
You need a video tag:
<video src="urlofvideo"></video>
You can use jQuery to bind the click events on the image map:
jQuery(document).ready(function($) {
$('area').bind('click', function(event) {
event.preventDefault();
//url of video
var url = this.href;
//Here your code to start the video
...
});
});
Im not 100% sure i understood your question, but i made you this. Its a map with cords on, this is without the old map method, but its with HTML, CSS and Jquery instead.
Sorry if i totally misunderstood, but its my shoot :)
<style type="text/css">
.map_image { display: block; width: 1280px; height: 960px; background-repeat: no-repeat; }
.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
.map_image #paris { width: 150px; height: 80px; top: 11px; left: 11px; border: 1px solid red; }
.map_image #copenhagen { width: 150px; height: 80px; top: 40px; left: 177px; border: 1px solid yellow;}
</style>
<div class="map_image" style="background-image: url('your_picture.jpg');">
<a class="map_link" id="paris" title="google.com"></a>
<a class="map_link" id="copenhagen" title=""></a>
</div>
<script>
$("#paris").click(function() {
// play a video about paris
alert("paris");
});
$("#copenhagen").click(function() {
// play a video about paris
alert("copenhagen");
});
</script>