I am setting op a quick presentation where i need to show two advertisements,
I load the videoJs player with all dependencies and to links to click
<!-- Load dependent stylesheets. -->
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video-js.min.css" />
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.css" />
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/dist/videojs.ima.css" />
<video id="content_video" class="video-js vjs-default-skin"
controls preload="auto" width="780" height="440">
<source src="https://storage.googleapis.com/gvabox/media/samples/android.mp4"
type="video/mp4" />
</video>
<div onclick="Select(2)">ad 1</div>
<div onclick="Select(1)">ad 2</div>
<!-- Load dependent scripts -->
<script src="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.min.js"></script>
<script src="//googleads.github.io/videojs-ima/dist/videojs.ima.js"></script>
with this I use the following JS
var player = videojs('content_video');
function Select(number) {
if (number == 1) {
var options = {
id: 'content_video',
adTagUrl: 'ad1.xml'
};
player.ima(options);
player.load();
}
if (number == 2) {
var options = {
id: 'content_video',
adTagUrl: 'ad2.xml'
};
player.ima(options);
player.load();
}
}
now when the page loads it plays the default android video
when I click on ad1 the player reloads and player with the ad
however when i click on the second ad (not necessary in that order) I get an error
Uncaught TypeError:player.ima is not a function
I understand that I can only load the player.ima once, so how would I in that case update the options and reload the player so I can switch between the ads.
It is because player.ima cannot be called more than one time. The first time you click is working because the ima is only called once. Second time ima already exists.
You may refer to following github link for more details.
https://github.com/videojs/videojs-contrib-ads/issues/345
Related
If you go here and immediately press the left-most image, and press the play button, it doesn't play. I tested this on Chrome. It works properly on Firefox.
The replit project has 6 files. 3 are the mp3 files, and the rest is an HTML, JS and CSS file.
Here is the code:
// gerates a img button, which gives a modal with the audio
// WARNING! Make sure the variable name doesn't have spaces, because it will be
// the actual HTML class
var make_audio_img_modal = function (img_file_name, audio_file_name, name){
// append to img parent div
var img_parent = document.getElementById("display-img-parent")
img_parent.innerHTML += `<img src="${img_file_name}" alt="${name}" class="display-img" onclick="document.getElementsByClassName('modal-link')[${document.getElementsByClassName('modal-link').length}].click();">`
// append to modal link div
var modal_link = document.getElementById("modal-links")
modal_link.innerHTML += `<p><a class="modal-link" href="#${name}-modal" rel="modal:open"></a></p>`
// append to modal div
var modals = document.getElementById("modals")
modals.innerHTML += `<div id="${name}-modal" class="modal">
<p style="text-align: center;"><audio controls preload="auto" class="audio" preload="false">
<source src="${audio_file_name}" type="audio/mpeg">
Your browser does not support the audio element.
</audio></p>
</div>`
var audio_element = document.createElement("AUDIO")
audio_element.setAttribute("src",audio_file_name);
modals.appendChild(audio_element)
// back to the top
// window.scrollTo(0, 0)
}
// make display image and audio modal
// gets the job done easily
window.onload = function(){
make_audio_img_modal(
"https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/International_Monetary_Fund_logo.svg/1200px-International_Monetary_Fund_logo.svg.png",
"https://snowworthybackground.me90.repl.co/music-1.mp3",
"1")
make_audio_img_modal(
"https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/International_Monetary_Fund_logo.svg/1200px-International_Monetary_Fund_logo.svg.png",
"https://snowworthybackground.me90.repl.co/music-2.mp3",
"2")
make_audio_img_modal(
"https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/International_Monetary_Fund_logo.svg/1200px-International_Monetary_Fund_logo.svg.png",
"https://snowworthybackground.me90.repl.co/music-3.mp3",
"3")
}
img{
width: 100px;
}
.display-img{
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">
</script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css">
</head>
<body>
<div id="display-img-parent"></div>
<div id="modal-links"></div>
<div id="modals"></div>
</body>
</html>
music-1.mp3: https://snowworthybackground.me90.repl.co/music-1.mp3
music-2.mp3: https://snowworthybackground.me90.repl.co/music-2.mp3
music-3.mp3: https://snowworthybackground.me90.repl.co/music-3.mp3
How do I make it so that the audio file loads immediately after I go there?
How to show pop up after 30,60,90,120 ....e.t.c seconds in videojs .I need to use like set time interval like event listener that checks the use is actually seeing the video or not.
$(document).ready(function() {
//Create the instance of the video
var myPlayer = videojs('my-video');
// get the current time of the video
// get
myPlayer.on('play', function() {
alert("You click on play event");
});
myPlayer.on('pause', function() {
alert("You click on pause event");
});
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
console.log(this.currentTime());
});
});
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
<link href="video-js.css" rel="stylesheet" type="text/css" />
<script src="//vjs.zencdn.net/5.8/video.min.js" type="text/javascript"></script>
</body>
Don't really understand your question, and I think that #Rob Wood answer is pretty good if you know what to do with the code, but I'm going to do my best:
var playing = false;
var lastPopup = 0;
function showPopup() {
alert("Popup test");
}
function checkPopup(time) {
if (playing && time-lastPopup >= 30) {
showPopup();
lastPopup = time;
}
}
$(document).ready(function() {
var myPlayer = videojs('my-video');
myPlayer.on('play', function() {
playing = true;
});
myPlayer.on('pause', function() {
playing = false;
});
myPlayer.on('timeupdate', function() {
var currentTime = this.currentTime();
checkPopup(currentTime);
});
});
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
<link href="video-js.css" rel="stylesheet" type="text/css" />
<script src="//vjs.zencdn.net/5.8/video.min.js" type="text/javascript"></script>
</body>
With this, showPopup() will be called if two conditions met: the video is playing and the difference in seconds since the last popup (or start) is 30 or more.
Hey just change you script as below,
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
var dc = getcurrentTime.toFixed(0);
if(dc != 0 && ((dc%30).toFixed(1)) == 0.0){ // here you can mention your time interval
myPlayer.pause();
$("#hoverDemo").show();
console.log(getcurrentTime+ " ---- "+((dc%30)));
}});
And add two div like below in html,
<div style="position: relative;width:640px;height: 360px">
<div id="user23Demo" style="height:360px;width:640px;">
<video id="my-video" class="video-js" controls preload="auto" style="height:200px;" width="360" height="200" data-setup="{}">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
</div>
<div id="hoverDemo" style="height:50px;position: absolute;top: 10px;background:none;display:none;" align="center">
<div align="center" style="color:white;background: red;max-width: 300px;min-height: 40px;">
<div>You have seen this before.<br/></div>
</div>
</div>
var poll = window.setInterval( function(){
//popup code here
}, 30000 )
Or, adding to the timeupdate event...
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
console.log(this.currentTime());
//assuming getcurrentTime is in seconds...
if( getcurrentTime >= 30 && getcurrentTime < 60 ) {
//popup code here
}
//the rest should be self explanatory. If this function polls every
//second, you could simply use getcurrentTime == 30, etc...
});
I want to play a video over an embedded game of mine and when the video ends, I want it to disappear so that we seamlessly go from the intro to the game itself (can't insert the video into the game in the engine I'm working in). How can I do this? Currently, I have something like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "container"><span>
<iframe src='...' />
<video autoplay> <source src="intro.mp4" type="video/mp4">
</video>
</span></div>
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
# Don't know what to put in here
};
</script>
</body></html>
One way you can do it is by giving the exact same size to the game's element and the video.
Then you could hide the game with the inline css display: none; when the page starts, and once the video ends you can hide the video and display the game.
var game = document.getElementById("...");
var video = document.getElementById("...");
game.style.display = "none";
video.onended = function(e) {
video.style.display = "none";
// or if you want to destroy it permanently
// video.parentNode.removeChild(video);
// video = null;
game.style.display = "";
};
I am working on a HTML5 video functionality and I have a question in SO asking the approach to be followed.
Found some semi-helping articles on w3.org website but found a completely working example on jsfiddle.net
Please follow the link here
I am trying the same as follows in my local machine -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var video = document.getElementById('video').play();
var intervalRewind;
$(video).on('play', function () {
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$(video).on('pause', function () {
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$("#speed").click(function () { // button function for 3x fast speed forward
video.playbackRate = 3.0;
});
$("#negative").click(function () { // button function for rewind
intervalRewind = setInterval(function () {
video.playbackRate = 1.0;
if (video.currentTime == 0) {
clearInterval(intervalRewind);
video.pause();
} else {
video.currentTime += -.1;
}
}, 30);
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<video id="video" controls>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
I am not able to find out why and where this script is failing. Is jquerymobile a problem?
Expected: Both Forward and Reverse functionalities should work.
Actual: None of the two buttons are working.
Any help is very much appreciated.
Thanks in advance.
You script worked (more or less), all it took to make it work was to comment out setting playback rate on play event. It was interfering with setting playback rate after clicking fast-forward. Working example here http://jsfiddle.net/h9EVQ/32/
As to the script itself, you should realize, that your rewind implementation has some flaws. One of them is that video is actually paused the whole time, so user can't just press pause to stop rewinding. But that would be easily solvable. The other, bigger issue is, that while doing a rewind you hop back in time by .1 fraction. That may or may be not an issue for some setups/movies. For those shorter movies your rewind function might be to speedy.
I am trying to create an HTML5 video player without the default controls that will play/pause by simply clicking the video(or overlaying div). I want to hide the default controls completely. I want the user to only be able to pause/play by clicking on the video. Is this possible? My initial strategy was to overlay a transparent div above the element that would serve as my play/pause button. Below is the HTML and javascript I started, but need a little bit of help. Thanks everyone!
<!-- Video -->
<div style="height:980px;height:540px;">
<div style="z-index:100;position:absolute;">
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
<source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</div>
<div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video -->
<!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
var videoEl = $('#myVideo');
playPauseBtn = $('#imgPoster');
playPauseBtn.bind('click', function () {
if (videoEl.paused) {
videoEl.play();
} else {
videoEl.pause();
}
});
videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->
There's no need for two id attributes in the video tag, and there's no need for a separate source tag if only using one file format, and the video and poster you are linking to does not exist.
Anyway, example below:
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4">
</video>
<script type="text/javascript">
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
</script>
EDIT: adding a fiddle : http://jsfiddle.net/SKfBY/
Had a quick look at your site, and the video is cool :-)
If you look closely you'll see that there are two jQuery files added, not really the problem here, but you only need one, the second one will make your page load slower.
Also not the problem, but you should consider using the HTML5 doctype like below, as the video element is HTML5, but most browsers will figure it out anyway.
The problem seems to be my fault, jsFiddle automagically inserts the $document.ready function, and I forgot it in my example, that's why it's not working for you.
Here is a complete rundown of how I would write it, I removed both instances of jQuery for you and replaced with Google's version of jQuery, wich is usually a better option, and also you should probably remove any scripts that you don't need, like removing swfObject if the site does not contain any flash files using swfobject etc.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script>
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
});
</script>
</head>
<body>
<video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</body>
</html>
This code works for me:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("video1");
video.currentTime += value;
}
But setting the time to 0 rewound the video only; no playback. So I wanted the video to replay after rewinding, and came up with this:
function restart() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
}
else {
video.pause();
}
video.currentTime = 0;
video.play();
button.textContent = "||";
}
Here are the buttons:
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
My two-cent's worth...
Cheers