I have this code, but I do not know how to make the song start from 0:19 seconds. Could you help me out?
<div class="fin-subheading">
· ROLEPLAY ·
<audio id='music' volume='0.5' autoplay controls>
<source src="anonymous.mp3" type="audio/mpeg">
</audio>
</div>
<script>
var audio = document.getElementById("music");
audio.volume = 0.3;
</script>
You can specify a playback range in the src attribute itself. See the docs here:
When specifying the URI of media for an or element,
you can optionally include additional information to specify the
portion of the media to play. To do this, append a hash mark ("#")
followed by the media fragment description.
A time range is specified using the syntax:
#t=[starttime][,endtime]
So instead of:
<source src="anonymous.mp3" type="audio/mpeg">
simply put:
<source src="anonymous.mp3#t=n,m" type="audio/mpeg">
where n and m are the start and end times, respectively.
The range can also be unbounded as well. So you could, for instance do this:
<source src="anonymous.mp3#t=19" type="audio/mpeg">
which will start at 19 seconds and play through till the end; or even this:
<source src="anonymous.mp3#t=,19" type="audio/mpeg">
which will start from the beginning through 19 seconds.
You can use currentTime property
window.onload = function() {
const audio = document.getElementById("music");
audio.volume = 0.3;
audio.currentTime = 19;
audio.play();
}
You need to use canplaythrough event and within that currentTime and then play when that time is reached.
Make sure you do not autoplay in the audio tag in HTML.
<audio id="audio2"
preload="auto"
src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" >
<p>Your browser does not support the audio element</p>
</audio>
<script>
myAudio=document.getElementById('audio2');
myAudio.addEventListener('canplaythrough', function() {
this.currentTime = 19;
this.play();
});
</script>
Related
I do found something online that is just about to be similar to what am trying to achieve, but here are a few problems i encountered. (1) i want the time be in minutes and seconds format. (2) the code only works for a single video in my html file. how can i make the code work for multiple videos in my file all showing their different durations. below is the code
<script> var myVideoPlayer = document.getElementById('video_player'), meta = document.getElementById('meta'); myVideoPlayer.addEventListener('loadedmetadata', function () { var duration = myVideoPlayer.duration; meta.innerHTML = "Duration is " + duration.toFixed(2) + " seconds." }); </script>
<video id="video_player" width="320" height="240" controls poster="something/something.jpg"> <source src="someVideo.mp4" type="video/mp4"> </video>
<div id="meta"></div>
This is what I want to achieve using codeigniter
Like this:
<video width="320" height="240" id = "myVideo" controls>
<source src="someVideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
var e = document.getElementById("myVideo");
var cancelAlert = false;
var run = function() {
if (e.readyState === 4 && !cancelAlert) {//readyState 4 means it is loaded fully
cancelAlert = true;//This is so that it only alerts once. No spam pls.
alert(e.duration);
}
requestAnimationFrame(run);//This is so that it runs every frame.
};
run();//run the function
</script>
You may need to do some tweaking, and there is probably a more efficient way to do this, but this is what I do.
Whever I set
s.loop = true
or with onended event :
s.onended = function()
{
this.currentTime = 0 ;
this.play();
};
it loops a few seconds before the end of the track....
Did anybody here experienced this problem before and found how to fix it ?
(Yes I know webaudio is way better, but it takes ages to decode files on mobiles, so I use it only for short sounds and have to use the nasty old audio element for music.)
If you want to always repeat the audio, and it does not work through Javascript, you can use loop tag in HTML
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
I test your code and play complete sound, then repeat the sound
<audio id="Audio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
<script>
var s = document.getElementById("Audio");
s.loop = true;
</script>
<script>
var s = document.getElementById("Audio");
s.onended = function(){
this.currentTime = 0 ;
this.play();
}
</script>
I use this to have a video player on browser
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Before clicking play, it display an image from the very beginning of the video, but in most of my video, first several seconds is black screen. Is it possible to make it get image at a specific time of the video, like "0:00:15", without creating thumbnail for the video?
I just want to add one more thing in this I guess you forgot to add preload="metadata" attribute in video tag like the below
<video preload="metadata" width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
and one more thing I want to add that this will not starts video after 15 seconds, this will only take an screenshot from video and make it as a first view of the video
Maybe this helps: (I have not tested it. Also you might be able to set the "poster" attribute of the video to the src of the image object. Just try it. =) )
<video width="320" height="240" controls id="video">
<source src="video.mp4" type="video/mp4">
</video>
$(document).ready(function() {
var time = 15;
var scale = 1;
var video_obj = null;
document.getElementById('video').addEventListener('loadedmetadata', function() {
this.currentTime = time;
video_obj = this;
}, false);
document.getElementById('video').addEventListener('loadeddata', function() {
var video = document.getElementById('video');
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL();
$('#thumbnail').append(img);
video_obj.currentTime = 0;
}, false);
});
Source 1
Source 2
Using the poster attribute is the easiest way to go. Getting a preview image of the video from a time other than the start is exactly what its designed for.
http://www.w3schools.com/tags/att_video_poster.asp
Trying to create a function to dynamically grab another segment of the video to use as the poster will undoubtedly create more latency and overhead for the client, negatively affecting the UX.
I did it this way:
It jumps to 0 if the currentTime is 15, but will go over the 15s mark when played
html:
<video id="video1" src="path/to/video#t=15" onplay="goToStart()" controls ></video>
javascript:
function goToStart(){
if (document.getElementById('video1').currentTime == 15){
document.getElementById('video1').currentTime = 0;
}
}
Add #t=15 to your video source, like below
<video width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
This will starts video after 15 seconds.
I have a 20 second long HTML5 video loop as the background on my webpage and it is set to autostart. Is it possible to delay the video autoplay for 5 seconds? I am trying to allow the video to load completely before trying to play to prevent it from stuttering as much. Here is my current code:
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/backgroundvideo.mp4" type="video/mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
</video>
Any help is greatly appreciated!!
This is a working solution for me. You should use canplay as a best practice to be sure the browser can play the video. Also, here is a straight javascript solution.
Note: I removed autoplay, an extra closing video tag, and formatted your muted & loop flags.
var video = document.getElementById("video_background");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" muted loop>
<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/SsRadVyPGjdkeg9tt/videoblocks-computer-hacking-in-process-cyber-security-concept_h-l3zbu4xb__PM.mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
That would be better to remove autoplay attribute from video tag and add it when you actually need it (meaning in 5 seconds). And if you are willing to preload video, then you should use preload="auto" (not preload="true"), it will load completely while loading a page.
const startVideo = async () => {
const video = document.querySelector('#video_background');
try {
await video.play();
video.setAttribute('autoplay', true);
console.log('video started playing successfully');
} catch (err) {
console.log(err, 'video play error');
// do stuff in case your video is unavailable to play/autoplay
}
}
setTimeout(startVideo, 5000)
Is it possible to detect when the play button in the html5 audio player is clicked?
For example:
<audio controls>
<source src="music.mp3"/>
<source src="music.ogg" />
</audio>
....
....
$('playbutton').on('click', function(e){
//some functions
});
Sounds like (heh) you're looking for the play event.
<audio controls id="player">
<source src="music.mp3">
</audio>
<script>
var player = document.getElementById("player");
player.addEventListener("play", function () {
console.log("it's go time");
});
</script>
For a full list of the available events, at least according to the spec, check out the WHATWG doc