I have searched all over google for this and nothing does what it is supposed to
It works perfect in IE ... You can see it in the logs that it works perferct ... But it wont work in chrome!!!
Why is it doing so in chrome ? ... It loads 10sek from catche and then nothing ...
<div style=" width:100%; height:320px; margin-top:-95px; background-image:url('video-logo.png'); background-repeat:no-repeat; background-position:center;">
<div id="videoRain" class="videoWrapper" style="text-align:center; display: none;">
<video id="rainVideo" width="100%" height="400px" preload="auto">
<source src="rain-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<script>
setTimeout(function(){
var refreshId = window.setInterval(function(){
myVid=document.getElementById('rainVideo');
puhvitud = Math.round(myVid.buffered.end(0));
if (puhvitud >= 14) {
setTimeout(function(){document.getElementById('videoRain').style.display='block';},0);
setTimeout(function(){document.getElementById('rainVideo').play();},0);
clearInterval(refreshId);
setTimeout(function(){document.getElementById('videoRain').style.display='none';},15000);
}
console.log(puhvitud);
}, 2000);
},1000);
</script>
Maybe someone has another way to do this ?
When the video is fully loaded ... this should be ran...
setTimeout(function(){document.getElementById('videoRain').style.display='block';},0);
setTimeout(function(){document.getElementById('rainVideo').play();},0);
setTimeout(function(){document.getElementById('videoRain').style.display='none';},15000);
EDIT:
Tried this:
<script>
function runVideoRain(){
rainVideo.addEventListener("loadeddata", runRain, false);
}
function runRain()
{
setTimeout(function() {document.getElementById('videoRain').style.display='block';},0);
setTimeout(function(){document.getElementById('rainVideo').play();},0);
setTimeout(function() {document.getElementById('videoRain').style.display='none';},15000);
}, false);
</script>
Does not work !!
Uncaught SyntaxError: Unexpected token ,
Uncaught ReferenceError: runVideoRain is not defined
onloadeddata
You can use the onloadeddata attribute.
onloadeddata : Script to be run when media data is loaded
<video id="rainVideo" width="100%" height="400px" preload="auto" onloadeddata="runMyFunction();">
<source src="rain-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
function runMyFunction(){
alert('The video is loaded');
}
</script>
It seems that onloadeddata attribute does not work on chrome. But attaching an event handler through addEventListener does the trick !
rainVideo.addEventListener("loadeddata", myRunFunction, false);
//with jQuery
$(rainVideo).on("loadeddata", myRunFunction);
Related
I'm trying to use a video I uploaded in googledrive, the link is an open acces to anyone as a viewer, in my HTML project but what I have back is an error. When i click on it it says i need to open it with an app, because they are 'analysing the video' since few hours.
https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing
In the HTML I put:
<video controls autoplay width="320" height="240">
<source src="https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing" type="video/mp4">
</video>
and it doesn't show nothing. In the console logs I got :
ERROR : GET https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing net::ERR_CONNECTION_TIMED_OUT
What am I doing wrong?
Try adding
Replace /file/d/ with /u/0/uc?id=
Replace ending /view?usp=sharing with &export=download
Input is:
https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing
Output for usage in <video> tag:
https://drive.google.com/u/0/uc?id=1vJgksW011ngQpyBV7xdrJid3X4cLFza_&export=download
Example code:
<!DOCTYPE html>
<html>
<body>
<video id="background-video" autoplay loop muted poster="./assets/clouds_HP.jpg">
<source src="https://drive.google.com/u/0/uc?id=1vJgksW011ngQpyBV7xdrJid3X4cLFza_&export=download" type="video/mp4">
</video>
</body>
<script>
var vid = document.getElementById("background-video");
vid.addEventListener('click', function(evt) { handle_Click (evt) } );
function handle_Click (evt)
{
//alert("clicked object ID is : " + evt.target.id);
vid.muted = false;
}
</script>
</html>
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>
I'm having an issue with Iframe autoplay="0" on Google Chrome.
I have tried every thread and and forum and nothing has worked.
I need the video to pause as soon as the page loads. I cannot use the <video> </video> tag because I need information to pull from a separate library into a main video div.
I haven't found any JavaScript that works and autostart="0" , autostart="false" autoplay="0" , autoplay="false" doesnt work either.
Link : Aza TV
<script>
$(".video-1, .video-2, .video-3").on("click", function(event) {
event.preventDefault();
$(".video_case iframe").prop("src", $(event.currentTarget).attr("href"));
});
</script>
.video_wrapper { width:67%; padding:10px; box-sizing:border-box; float:left; min-height:50px;border: thin solid #F60; border-radius:5px 5px;}
.nextvideo_wrapper { width:31%; padding:8px; box-sizing:border-box; float:left; min-height:400px;border: thin solid #F60; border-radius:5px 5px;margin-left:10px; background:#333;}
<div class="video_wrapper">
<iframe name="someFrame" id="someFrame" width="100%" height="420" src="http://41.76.210.2/vod/azamusica_VictoriaKimani_webisode22_20151022_HDO.mp4?autoplay=0" controls ></iframe>
</div>
<div class="nextvideo_wrapper">
<iframe src="libraries/azamuzika.php" width="100%" height="400px" bg=ffffff&text=000000" frameborder="0"></iframe>
</div>
Please note your selector does not actually match the html you posted.
To keep it simple try to add &autoplay=0 to your urls - if that does not work, try this - I gave the actual iframe an ID of iFrame1 and write the video tag into it
var vid = '<video controls="controls"><source src="__VIDEO__" type="video/mp4" /><!--[if gt IE 6]><object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><! [endif]--><!--[if !IE]><!--><object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"><!--<![endif]--><param name="src" value="__VIDEO__" /><param name="autoplay" value="false" /></object></video>';
$(".video-1, .video-2, .video-3").on("click", function(event) {
event.preventDefault();
var ifrm = $('#iFrame1').get(0); // get the DOM object
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.write(vid.replace(/__VIDEO__/g,$(event.currentTarget).attr("href"));
ifrm.document.close();
});
I've tried all the possible solutions but nothing worked for local video bindings. I believe best solution would be to fix using jQuery.
$(document).ready(function () {
var ownVideos = $("iframe");
$.each(ownVideos, function (i, video) {
var frameContent = $(video).contents().find('body').html();
if (frameContent) {
$(video).contents().find('body').html(frameContent.replace("autoplay", ""));
}
});
});
Note: It'll find all the iframes on document ready and loop through each iframe contents and replace/remove autoplay attribute. This solution can be use anywhere in your project. If you would like to do for specific element then use the code under $.each function and replace $(video) with your iframe element id like $("#myIFrameId").
I am searching for the holy grail of a simple looping html5 video, I am currently using the following code which doesn't seem work
<video width="650" height="650" class="outer_shadow" autoplay="" ended="this.play()" loop>
<source src="/videos?video_id=ag1kZXZ-anQtd2luZG93cg4LEghUaW1lRGF0YRgNDA">
</video>
Can anyone could hilight why this code doesn't work/suggest their best work arround?
Surely you just need to set the loop attribute (see fiddle tested in Chrome):
<video id="myVideo" width="650" height="650" class="outer_shadow" autoplay loop>
<source src="http://content.bitsontherun.com/videos/nPripu9l-60830.mp4">
</video>
If firefox still doesn't like the loop attribute, try the following fix:
document.getElementById('myVideo').addEventListener('ended', function(){
this.currentTime = 0;
}, false);
Update:
Perhaps not as simple as you had hoped but, as a work around for the problem, it might be worth trying one of the many HTML5 video libraries such as video.js. If the problem persists you could, as a worst case, force the library to use Flash where supported (ie. desktop) and fall-back to HTML5 where it's not (as explained here).
Here is the fiddle with working example of HTML5 video player that loops several videos. Just add your URLs to src array...
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<video id="video" width="500" height="400" controls autoplay></video>
<script>
var src = [
"http://content.adfox.ru/131007/adfox/205544/865991_11.mp4",
"http://all.rutube.ru/130627/gpmdigital/217059/805529_11.mp4"
];
var curSrc = 0;
$(function() {
$('#video').attr("src", src[curSrc % src.length]);
curSrc++;
var video = $('#video').get(0);
$('#video')
.on('loadedmetadata', function() {
video.currentTime=0.01;
video.play();
})
.on('ended', function() {
console.log('ended');
video.src = src[curSrc % src.length];
video.load();
curSrc++;
});
});
</script>
How do I play two videos in a sequence in the HTML5 video tag?
In Google Chrome, the following code plays only the first intro video.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
var i = 0;
var sources = ['1.mp4', '2.mp4'];
videoElement.addEventListener('ended', function(){
videoElement.src = sources[(++i)%sources.length];
videoElement.load();
videoElement.play();
}, true);
</script>
</head>
<body>
<video id="videoElement" width="640" height="360" autoplay="autoplay">
<source src="intro.mp4" type="video/mp4"></source>
</video>
<body>
<html>
Browser should fire error 'videoElement is not defined' with your JavaScript code, you must get video element from DOM instead of using its id directly. Please change your code to
$(document).ready(function() {
//place code inside jQuery ready event handler
//to ensure videoElement is available
var i = 0;
var sources = ['1.mp4', '2.mp4'];
$('#videoElement').bind('ended', function() {
//'this' is the DOM video element
this.src = sources[i++ % sources.length];
this.load();
this.play();
});
});
In case someone came across this question again, here is my solution to similar problem-I needed to play first video once and then second video in a loop. I also have support for .webm, .m4v and .mp4.
This is my JS:
$(document).ready(function(){
var vid = document.getElementById("landing-video");
vid.onplay = function() {
var source=vid.currentSrc;
folder = source.match(/(.+)(\/)/);
ext = source.match(/(\.\w+)$/);
};
vid.onended = function() {
$("#landing-video").attr({
"src":folder[0]+"video-2"+ext[0],
"loop":""
});
};
});
And this is my HTML:
<video autoplay="" muted="" poster="" id="landing-video">
<source src="my-folder/video-1.webm" type="video/webm">
<source src="my-folder/video-1.m4v" type="video/x-m4v">
<source src="my-folder/video-1.mp4" type="video/mp4">
</video>
This might save someone some time.