Ive been trying everything I know but I cant seem to just add in the video, in the center of the page, to loop non-stop. Am I using a wrong code or...?
I am currently using the latest Firefox browser
Code: http://pastebin.com/NJywJwaW
Try now
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var vid = document.getElementById("myVideo");
vid.autoplay = true;
vid.loop = true;
vid.controls = false;
vid.load();
</script>
</head>
<body bgcolor="#000000">
<center>
<video id="myVideo" autoplay>
<source src="sk1logo1.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
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>
This is my code so if you can help me it'd be great thank's StackOverflow
<head>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
</head>
<body>
<img src="SoundWave.gif" width="200" height="200" value="play" onclick="play();">
<audio id="audio" src="01.mp3"></audio>
</body>
The code you need will be something like this:
<head>
<script>
function play(){
var myAudio = document.getElementById("audio");
if(myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
</script>
</head>
<body>
<img src="SoundWave.gif" width="200" height="200" onclick="play();">
<audio id="audio" src="01.mp3"></audio>
</body>
you can get more information about html5 audio element and how to work with it using this link
P.S. <img> tag does not have a value property
Hello I want to stop audio at determined time for example I click play and I want to stop it at 5 seconds, when it stops I want to show a button and if you click it the audio will continue again and I need to do it 5 times, any help is welcome
Here is what I have:
<audio controls id="audio2" src="song.ogg" type="audio/ogg">
<p>Your browser does not support the audio element</p>
</audio>
<script>
myAudio=document.getElementById('audio2');
myAudio.addEventListener('play', function() {
this.play();
if(this.currentTime = 5){
this.stop();
}
});
</script>
</audio>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#audio").on(
"timeupdate",
function(event){
if (this.currentTime >= 5) {
$("#audio")[0].pause();
}
});
});
</script>
</head>
<body>
<audio controls preload id="audio">
<source src="cancion.mp3" type="audio/mpeg" />
Tu navegador no soporta esta caracteristica
</audio>
<div id="current">0:00</div>
<div id="duration">0:00</div>
</body>
</html>
I did it, finally
I'm trying the HTML5 video tag as in this example, but not everything is working.
I want to use the ontimeupdate event to print current video time:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<video src="test.ogv" width='640' height='480' controls='controls'>
</video>
<div id=time>time</div>
<script>
var video = document.getElementsByTagName('video')[0];
var time = document.getElementById('time');
video.ontimeupdate = function(e) {
time.innerHTML="Current time: " + video.currentTime;
}
</script>
</body>
</html>
This works in Opera and Firefox, but not in Google Chrome.
So, why does this code not working in Chrome?
This works for me, maybe chrome's bug/fault your code doesn't work
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<video src="test.mp4" width='640' height='480' controls='controls' ontimeupdate="timeupdate();">
</video>
<div id=time>time</div>
<script>
var video = document.getElementsByTagName('video')[0];
var time = document.getElementById('time');
function timeupdate() {
time.innerHTML = 'Current time: ' + video.currentTime;
}
</script>
</body>
</html>