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);
Related
How do you detect when a HTML5 <video> element has finished playing?
You can add an event listener with 'ended' as first param
Like this :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.
This is the pertinent section:
<video src="video.ogv">
video not supported
</video>
then you can use:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});
HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Event types HTML Audio and Video DOM Reference
You can simply add onended="myFunction()" to your video tag.
<video onended="myFunction()">
...
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
function myFunction(){
console.log("The End.")
}
</script>
Here is a simple approach which triggers when the video ends.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html>
In the 'EventListener' line substitute the word 'ended' with 'pause' or 'play' to capture those events as well.
Here is a full example, I hope it helps =).
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>
You can add listener all video events nicluding ended, loadedmetadata, timeupdate where ended function gets called when video ends
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
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 to switch the #cat video src whith the .cover src I clicked
<video width="100%" height="100%" id="cat">
<source src="es.mp4" id='Source' type="video/mp4">
</video>
<video class="cover">
<source src="Wes.mp4" type="video/mp4">
</video>
<video class="cover">
<source src="For_Wes.mp4" type="video/mp4">
</video>
I tried to do make it with something like that :
var a = document.getElementById('Source');
var b = a.getAttribute('href');
document.getElementsByClassName("cover").onclick{
Any ideas ?
Create an array to loop through (Be sure to keep HTML structure the same if you add more videos). Then add listener to each cover. When cover is clicked, update the main video source.
(function(video, covers) {
/** create loopable array */
covers = Array.prototype.slice.call(covers);
function update(target, source) {
/** update the source attribute */
source.setAttribute('src', target.getAttribute('src'));
}
function onClick(cover) {
/** Add Listener to each cover */
cover.addEventListener('click', function(event) {
/** call update on each click */
update(event.target.firstElementChild, video);
}, false);
}
covers.forEach(onClick);
}(document.querySelector('#Source'), document.querySelectorAll('.cover')));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>How to chance a video src by clicking links that contain other video src [Java Script]</title>
</head>
<body>
<video width="100%" height="100%" id="cat">
<source src="es.mp4" id='Source' type="video/mp4">
</video>
<video class="cover">
<source src="Wes.mp4" type="video/mp4">
</video>
<video class="cover">
<source src="For_Wes.mp4" type="video/mp4">
</video>
</body>
</html>
am trying to display multiple videos one by one using html5 and java script.. but its not coming.. i used the below code
<html>
<head>
<title>video example</title>
</head>
<script>
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");
function run(){
video_count++;
//alert(video_count);
if (video_count == 4) video_count = 1;
var nextVideo = "video/video"+video_count+".mp4";
//videoPlayer.src = nextVideo;
alert(nextVideo);
videoPlayer.setAttribute("src", nextVideo[video_count]);
videoPlayer.play();
}
videoPlayer.onended(function(e) {
if (!e) {
e = window.event;
}
run();
};
</script>
<body onload="run();">
<video id="myVideo" height="400" width="400" autoplay>
<source id="ss" src="video/video1.mp4" type='video/mp4'>
</video>
</body>
</html>
currently code is displaying only first video and it will stop...
Let me show mine :D
<html>
<head>
<title>Subway Maps</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body onload="onload();">
<video id="idle_video" width="1280" height="720" onended="onVideoEnded();"></video>
<script>
var video_list = ["Skydiving Video - Hotel Room Reservation while in FreeFall - Hotels.com.mp4",
"Experience Conrad Hotels & Resorts.mp4",
"Mount Airy Casino Resort- Summer TV Ad 2.mp4"
];
var video_index = 0;
var video_player = null;
function onload(){
console.log("body loaded");
video_player = document.getElementById("idle_video");
video_player.setAttribute("src", video_list[video_index]);
video_player.play();
}
function onVideoEnded(){
console.log("video ended");
if(video_index < video_list.length - 1){
video_index++;
}
else{
video_index = 0;
}
video_player.setAttribute("src", video_list[video_index]);
video_player.play();
}
</script>
</body>
<html>
<head>
<title>video example</title>
</head>
<body>
<video id="myVideo" height="400" width="400" autoplay onended="run();">
<source id="ss" src="video/video1.mp4" type='video/mp4'>
</video>
<script>
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");
function run(){
video_count++;
if (video_count == 4) video_count = 1;
videoPlayer.setAttribute("src","video/video"+video_count+".mp4");
video.load();
video.play();
}
</script>
</body>
</html>
Changes:
Placed the javascript code just before closing the body tag to ensure that the video object is loaded before the script is run.
video element already has an "onended" attribute so you can call the run function from there.
videoPlayer.setAttribute("src", nextVideo[video_count]); has an issue. nextVideo[video_count] implies that nextVideo is an array but is not . Its a string. So you can directly use nextVideo when setting the attribute.
videoPlayer = document.getElementById("ss"); gets the source element. You cannot call the play() function on that object, simply because that function isn't defined for it. So video.play() should work just fine.
Hope this solves your problem.
before this function call video.play(); need add: video.load();
otherwise it will still display the previous video. So the code should be
video.load();
video.play();
<video id="myVideo" height="400" width="400" autoplay onended="run();">
Add controls auto muted inside video tag.
<video id="myVideo" height="400" width="400" autoplay onended="run();" controls auto muted >
It's working fine. Thanks for you!
Little bit modified code I have attached below, I hope this is helpful for who searching the video plays continuously with entire screen,
enter image description here
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>