I want to display a video on a page which starts at a certain position (e.g., 10 seconds). I have found a way to program this with the code below.
My problem is that it takes the browser several seconds to start the video. As far as I have read, the browser needs to load the duration of the video before it can play it at the certain position.
Is there some way to start the video immediately without any delay?
This is my code:
HTML
<video style="display:block; margin: 0 auto;" width="512" height="288" id="vid1" autoplay>
<source src="video.ogg" type="video/ogg" />
<source src="video.webm" type="video/webm" />
</video>
Javascript
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 10 ;}, false)
I would be very thankful for every hint!
Thanks in advance!
I won't have enough have the reputation to comment so posting as an answer.
Have you tried to put ??
document.getElementById("vid1").load();
This load() method is used to load/update the video.
Related
i need help in php website.i am create website like online videos courses.i need help in video module.if playing any video and close it after some time and again play this video then need to play it where it can be stop or closed.
This video are getting from database not embedded video.for showing video i am using afterglow video player.
<video class="afterglow" id="myvideo" height="385px" width="770px">
<source type="video/mp4" src="adminpanel/video/<?php echo $results->c_video; ?>" />
</video>
Is there any script to solve this problem.
As suggested in the comments you have to save the position of your video somewhere. The most simple approach would be to use the localStorage. You can read more about localStorage in the official documentation: https://developer.mozilla.org/de/docs/Web/API/Storage
While the video is played the timestamp gets refreshed each second and the localStorage item is updated.
Then if you reload the page (remember: item still exists in the storage after a refresh) you check for its existence and set the video to the timestamp.
This should point you in the right direction.
let video = document.getElementById("example");
if (localStorage.hasOwnProperty("time")) { //if time was set before adjust the video to it
video.currentTime = localStorage.getItem("time");
}
let timer = setInterval(getTimestamp,1000);
function getTimestamp(){
localStorage.setItem("time", video.currentTime);
console.log(localStorage.getItem("time"));
}
<video id="example" width="320" height="240" controls>
<source src="yoursourcefile" type="video/mp4">
</video>
I have a problem with getting sound to play and pause within my JS and HTML code.
I have a function that takes the two tracks inputted, pauses one, and plays another, for use to create dynamic music based on where the user is or what it is doing. However when the function is called, neither track is played or paused. I've looked up online to make sure that I'm using the proper audio formatting and from my research I have been. I'm currently stumped as to why this isn't working so a fresh set of eyes may help to figure out the problem.
My Javascript:
function playTrack(musicon, musicoff) {
document.getElementById(musicon).play();
document.getElementById(musicoff).pause();
}
My HTML
<audio id="themeD" autoplay="autoplay" loop="true">
<source src="d.ogg" type="audio/ogg" />
<source src="d.mp3" type="audio/mpeg" />
</audio>
<audio id="themeE" loop="true">
<source src="e.ogg" type="audio/ogg" />
<source src="e.mp3" type="audio/mpeg" />
</audio>
<a class="button" onclick="javascript:playTrack('ThemeE','ThemeD');">Change audio</a>
Somewhat of a beginner with Javascript and definitely a noob with audio elements so any and all help or tips would be appreciated.
Watch your spaces. You play the audio with the id Theme E, but the id of your audio is themeE
I am trying to change videos dynamically in my web page using JavaScript. The first video (.mp4 format) file is playing well, but when I click the button to change the video, it is showing some black screen instead of playing next video.
I tried in many ways to solve this issue by reading many Stack Overflow articles, but it is still not working.
Could anyone please guide me to solve this issue?
My JavaScript code:
function vidSwap() {
var player = document.getElementById("player");
player.pause();
document.getElementById("webm").src = "D:\movies\Telugu\movie2.webm";
document.getElementById("mp4").src = "D:\movies\Telugu\movie2.mp4";
document.getElementById("ogg_src").src = "D:\movies\Telugu\movie2.ogg";
player.load();
player.play();
}
My HTML Code:
<video id="player" height="380" width="440" controls>
<source id="webm" src="D:\movies\Telugu\movie1.webm" type="video/webm" />
<source id="mp4" src="D:\movies\Telugu\movie1.mp4" type="video/mp4" />
<source id="ogg_src" src="D:\movies\Telugu\movie1.ogg" type="video/ogg" />
</video>
<br>
<br>
<input type="button" value="Next Video Clip" onclick="vidSwap()" />
Your problem is in the vidSwap function: When you're setting the src attribute of each of the elements, the backslashes in the strings you're using are being interpreted as escaped characters.
document.getElementById("webm").src = "D:\movies\Telugu\movie2.webm";
// ^^ ^^ ^^
You need to escape the backslash characters by adding an extra backslash before each (\\), like so:
document.getElementById("webm").src = "D:\\movies\\Telugu\\movie2.webm";
// Repeat for each string
Happy coding!
Here is my code:
Html:
<div id="audio-files" style="display: none;">
<audio id="click-sound">
<source src="/assets/click.mp3" type="audio/mpeg">
<source src="/assets/click.wav" type="audio/wav">
</audio>
</div>
JavaScript:
play: function() {
var audio = $('#audio-files').find('audio#click-sound');
if (audio.length) {
audio[0].play();
}
}
Desired behaviour:
When I call play(), the sound should play once. There should be only 1 request to the server - on page load. Multiple calls to play() should not trigger multiple requests.
Actual behaviour:
- Firefox (19.0.2), Chrome(26.0.1410.43) and Opera(12.15) work as expected.
- Safari (6.0.3) plays the desired sound only once, then refuses to play it or any other sound when asked to.
I tried adding audio[0].load() before audio[0].play() but this causes the browser to make a request each time it is asked to play the audio, which is totally undesirable.
Fiddle: http://jsfiddle.net/Tpvfm/
I think there is a problem with your example mp3 file.
I just removed it (mp3) from your fiddle and it works in my Safari on OSX.
<div id="audio-files" style="display: none;">
<audio id="click-sound">
<source src="/assets/click.wav" type="audio/wav">
</audio>
</div>
Fiddle: 73GCX
I'm currently working on a page for playing different videos when you click an element. While it works beautifully on the computer, of iOS devices it does not. The problem is that when the element, in this case a button, is clicked, it shows the video but does not start playing, as it should. The script is
$(document).ready(function(){
$('#video_1, #video_2').hide();
$('.icon_1').click(function(){
$('#video_2').fadeOut(function(){
$('#video_1').fadeIn();
});
});
$('.icon_2').click(function(){
$('#video_1').fadeOut(function(){
$('#video_2').fadeIn();
});
});
$('.icon_1').click(function(){
$('.video_2').get(0).pause();
$('.video_2').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
$('.icon_2').click(function(){
$('.video_1').get(0).pause();
$('.video_1').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
});
and the html is
<button><div class="icon_1" id="mediaplayer" onclick="play">cadillac</div></button>
<button><div class="icon_2" id="mediaplayer2" onclick="play">nike</div></button>
<div id="video_1">
<video class="video_1" width="50%" height="50%" controls poster="http://www.birds.com/wp-content/uploads/home/bird.jpg" >
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
</video>
</div>
<div id="video_2">
<video class="video_2" width="50%" height="50%" controls poster="images/BKG_JohnGT.png">
<source src="images/01.mp4" type="video/mp4" />
</video>
</div>
It anyone could give me a function that could mak this happen, tht would be great
iOS does not support more than one video element in a page at one time. It doesn't even give you an error message - it will merely display the poster image (or first frame) and then fail to play, just as you describe.
Unfortunately, you can't do a true cross-fade, but you can come close. Start with only one video element attached to the DOM. When switching from one video to another, you can fade the current video out, and then when it's done, remove it and add the second video. Apple has provided some details and code samples on how to do this.
In theory, you should be able to grab a snapshot of the video frame in a canvas and swap that in for the video and fade the canvas out, but iOS doesn't support capturing video frames in a canvas either.
These and some other non-standard behaviors are described well in this article.