Why this throws up this error:
The element or ID supplied is not valid. (VideoJS)
I know it may be obvious but there's the code:
<script type="text/javascript">
var videoPlayer = _V_("example_video_1", {}, function(){
this.addEvent("ended", function(){
alert('Here I am');
});
});
</script>
and video ID set via PHP
<?PHP
echo "<video id=\"example_video_1\" class=\"video-js vjs-default-skin\" controls width=\"".$vid_h."\" height=\"".$vid_w."\" autoplay preload=\"auto\" data-setup='{}'>";
?>
Make sure your script is after the video element it references. Otherwise your get "the element or ID supplied is not valid" because it doesn't exist at the point the script executes.
e.g.
<!DOCTYPE html>
<html>
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="360" height="202" autoplay data-setup="{}">
<source src="http://example.com/video.mp4" type='video/mp4'>
</video>
<script type="text/javascript">
var videoPlayer = _V_("example_video_1", {}, function(){
this.addEvent("ended", function(){
alert('Here I am');
});
});
</script>
</body>
</html>
Related
I would like to implement a basic code which runs videojs(http://videojs.com/getting-started/) upon a click. Implementing without a function works. But when I make it within a function (create DOM elements and attach them to the body), it does not. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.0.3/video.js"></script>
<!-- If you'd like to support IE8 (for Video.js versions prior to v7)
<script src="http://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>-->
</head>
<body>
<div id = 'hello'></div>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="" data-setup="{}">
<source src="Selena_Gomez_Same_Old_Love.mp4" type='video/mp4'>
<source src="" type='video/webm'>
</video>
Click me for playing the video
<script>
function playVideo(){
var video_element = document.createElement("VIDEO");
video_element.id= 'my-video';
video_element.class = 'video-js';
video_element.controls = 'auto';
video_element.setAttribute('preload','auto');
video_element.setAttribute('width','640');
video_element.setAttribute('height','264');
//source
var source_element = document.createElement("SOURCE");
source_element.src='Selena_Gomez_Same_Old_Love.mp4';
source_element.type= 'video/mp4';
document.body.appendChild(video_element);
document.body.appendChild(source_element);
}
</script>
</body>
</html>
I found the answer
video_element.appendChild(source_element);
document.body.appendChild(video_element);
Im trying to show the current duration (print currenttime live) when the video is playing.
I did read Kurt Van den Branden answer on Detect if HTML5 Video element is playing but to no avail
i eventually want to carry the currenttime value to a php variable $currenttime
below is my current code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body >
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
<source src="http://action.news/videos/Britney%20Spears%20-%20Overprotected%20(2009)%20Full%20HD%201080p_60%20fps.mp4" type="video/mp4">
</video>
<script>
var media = document.getElementById('myVideo');
// Playing event
var isPlaying = function(e) {
#$("#output").html("Playing event triggered");
};
// durationchange
var isdurationchange = function(e) {
$("#output").html(vid.currentTime);
};
media.addEventListener("playing", isPlaying, false);
media.addEventListener("durationchange", isdurationchange, true);
</script>
</body>
</html>
you should be able to carry it like this , the pros will help you with syntax
document.write("<a href=/time.htm?currentTime='.media.addEventListener("timeupdate", isdurationchange, true).'>link</a>;);
listen event timeupdate instead of durationchange
(also correct your typo error as #Jeto mentions in comment)
var media = document.getElementById('myVideo');
// Playing event
var isPlaying = function(e) {
$("#output").html("Playing event triggered");
};
// durationchange
var isdurationchange = function(e) {
$("#output").html(media.currentTime);
};
media.addEventListener("playing", isPlaying, false);
// media.addEventListener("durationchange", isdurationchange, true);
media.addEventListener("timeupdate", isdurationchange, true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
<source src="http://fiber.westnet.ca:81/videos/Britney%20Spears%20-%20Overprotected.mp4" type="video/mp4">
</video>
I need the contents of a div to display after an HTML video ends. I saw this post which is a start, but I'm lost on the actual function:
Detect when an HTML5 video finishes
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// need to show a hidden div!
}
</script>
This should do the trick... I used example "classes" and "ids" since I don't have your full source code.
//CODE
<!DOCTYPE html>
<html>
<head>
<style>
.div-hide{
display: none;
}
</style>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e){
var div = document.getElementById("selectme");
div.classList.remove("div-hide");
div.innerHTML = "I'm showing";
}
</script>
</head>
<body>
<video src="video.ogv" id="myVideo">
video not supported
</video>
<div id="selectme" class="div-hide">I'm Hidden</div>
</body>
</html>
You can hide div by id when the page loads, and show it again when video ends.
<video src="video.ogv" id="myVideo">
video not supported
</video>
<div id="divId">
Hello world!
</div>
<script type='text/javascript'>
$(document).ready(function() {
$("#divId").hide();
});
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$("#divId").show();
}
</script>
While I have been able to listen for the "timeupdate" event with a vanilla HTML5 player, I can't seem to get it to work with video.js.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<video id="testvid" class="video-js vjs-default-skin" controls width="640" height="480" data-setup='{}'>
<source src="testvideo.mp4" type="video/mp4">
</video>
</body>
</html>
<script>
videojs('testvid').ready(function(){
var myPlayer = this;
$(myPlayer).bind('timeupdate', function(){
console.log('the time was updated to: ' + this.currentTime);
});
});
</script>
Am I misunderstanding a basic way that video.js operates?
You actually CAN register events in callback of ready(), and it is better solution because in previous one registration of event still could be finished after ready(). Use following snippet:
videojs('example_video_1').ready(function () {
this.on('timeupdate', function () {
console.log(this.currentTime());
})
});
I have to add the event listener before the video loads. I solved the problem by changing the script to:
<script>
$('#testvid').on('timeupdate', function(){
console.log('the time was updated to: ' + this.currentTime);
});
videojs('testvid').ready(function(){
var myPlayer = this;
});
</script>
I've created a html5 video playlist. When the page first loads I want the video to be paused, so the user has the choice to begin the autoplay sequence.
Code:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var videoPlayer= document.getElementById('video');
videoPlayer.addEventListener('ended', function(){
this.pause();
this.src = "http://www.mp4point.com/downloads/8feeca1a540b.mp4";
}, false);
}//]]>
</script>
</head>
<body>
<video id="video" src="http://media.w3.org/2010/05/sintel/trailer.mp4" autoplay autobuffer controls />
</body>
</html>
Jsfiddle:http://jsfiddle.net/3uRq6/7/
By the looks of it you need to reverse your logic. Remove the autoplay attribute from the <video> and on your event listener you should change the src then play the video.
http://jsfiddle.net/3uRq6/9/
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var videoPlayer= document.getElementById('video');
videoPlayer.addEventListener('ended', function(){
this.src = "http://www.mp4point.com/downloads/8feeca1a540b.mp4";
this.play();
}, false);
}//]]>
</script>
</head>
<body>
<video id="video" src="http://media.w3.org/2010/05/sintel/trailer.mp4" autobuffer controls />
</body>
</html>