HTML5 audio louder while playing - javascript

I've got a code like this:
var upsound = new Audio('sound/upsound.mp3')
upsound.loop = true;
upsound.play();
I would like to get the volume louder while the audio is playing.

Use the volume property for this, which goes from 0.0 (mute) to 1.0 (full volume):
upsound.volume = 1.0;
Edit:
If you want to set the volume up after a certain delay, you can simply use a timeout:
usound.volume = 0.0; // Start with no sound
setTimeout(function() {
usound.volume = 1.0; // Increase the volume after 2 seconds
}, 2000);

Volume attribute for audio should be the solution but until now, it seems like it is not been incorporated in any browsers. Check Browser Compatibility for Audio files. You can use something like this which will give you controls to use during playing but through coding, it is not yet possible.
<audio controls="controls">
<source src="foo.wav" type="audio/wav">
</audio>

Related

how to play videos one after another without gap

I have a folder with several hundred mp4 files of 2sec duration each.
I would like to play them one after the other without any glitch between them.
I have tried what is advised in Playing videos one after another in html5 but this does not solve the glitch problem between video transitions.
<video width="256" height="192" id="myVideo" controls autoplay>
<source src="../uploads/VID_190923141334_20190923_141336.mp4" id="mp4Source" type="video/mp4">
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
var player=document.getElementById('myVideo');
var mp4Vid = document.getElementById('mp4Source');
player.addEventListener('ended',myHandler_ended,false);
function myHandler_ended(e)
{
mp4Vid.src = "../uploads/VID_190923141334_20190923_141338.mp4";
player.load();
player.play();
}
</script>
Can anyone point me to the right direction in order to eliminate the glitch in each video transition?
The "2 players 1 hidden" method is not stable: it does not work on mobile devices, and it will lag on older/slower computers when switching one player to another. I wanted to create a live stream with this method, but it's an ugly DIY, don't do that.
There is an HTTP Live Streaming (HLS) standard and with it you can continuously play small m3u8 (.ts) chunks (it is supported by videoJS and OBS also has m3u8 recording support).
I made live streams on Sia Skynet, which is a static (non-modifiable) decentralized storage for files (like IPFS, but different). Here you can find some demos & the source code: https://github.com/DaWe35/Skylive
One approach is to have two video elements and players on your page - this approach is often used for pre, mid and post roll adverts, which are often from a different source than the main video itself.
The two video elements are in the same place on the page, one over the other.
You play the first video and when you are near the end of it preload and then pause the second video but keep the player hidden.
At the point where the first video ends, you hide the first player and show and start the second player.
You then again preload and pause the next video in the player you have just hidden and it becomes the one ready to start when the one now playing is finished.
The snippet below hides the second video until the first has ended and then plays the second one hiding the first. This is just a rough outline you can play with where you cue the movies to etc. If you leave your pointer over the video you can watch the timeline - films fade in and out so it may not be obvious it is playing.
Hover over the video ion the snippet while it is playing to see the time as it switches from one to the other.
var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");
vid2.style.display = "none"
vid1.onloadeddata = function() {
vid1.currentTime = 872;
vid1.play()
};
vid2.onloadeddata = function() {
vid2.currentTime = 10; //Just to illusrate as begining is black screen
vid2.pause()
};
vid1.onended = function() {
vid2.play()
vid1.style.display = "none"
vid2.style.display = "block"
};
<video id="MyVid1" width="320" height="176" controls preload="auto">
<source src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
Your browser does not support this video format
</video>
<video id="MyVid2" width="320" height="176" controls preload="auto">
<source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type="video/mp4">
Your browser does not support this video format
</video>

seamlessly change video resolution while video is playing

I am writing code that changes video resolution depending on the current screen size. On fullscreen button clicked I check screen size and if it is bigger than 1280px, a 1080p video is used instead of 720p.
I do that by changing src of the video element. Unfortunately, this causes a delay of a second or more, because the video with higher resolution needs to load first.
How can I create a seamless transition between the 2 resolutions? Sometimes youtube or facebook videos change resolution depending on your network conditions, and it is seamless in terms of delay.
This is my basic code. I use plyr library:
html
<video id="main-video" playsinline poster="/assets/img/video.png" class="element-video">
<source id="main-video-source" src="/assets/img/video.mp4" type="video/mp4" size="1080">
</video>
js
var player = new Plyr('#main-video',{controls:['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen']});
player.on('enterfullscreen', event => {
var videoPlayer = document.getElementById("main-video");
if(window.devicePixelRatio * window.innerWidth > 1280){
var currentTime = videoPlayer.currentTime;
videoPlayer.src = "video.mp4";
videoPlayer.currentTime = currentTime;
videoPlayer.play();
}else{
var currentTime = videoPlayer.currentTime;
videoPlayer.src = "video-720.mp4";
videoPlayer.currentTime = currentTime;
videoPlayer.play();
}
});
As Joel says, using Adaptive Bit Rate Streaming is the easiest approach here currently to get the affect you are looking for. See here for more info on ABR and an example of how to view it in action: https://stackoverflow.com/a/42365034/334402
Most video player clients will support ABR, and will give the type of smooth(ish...) transition you see on services like YouTube or Netflix when it steps through different resolutions. Having more different resolutions or 'steps' may make it smoother so it may be worth experimenting to find what is acceptable for your use case.
Also, as you already have at least two resolution versions of the video any extra server side overhead is not too great for your case.

Html5 video Scroll video

I've a problem with the scroll control of video. I took this code : http://codepen.io/ollieRogers/pen/lfeLc/.
var frameNumber = 0, // start video at frame 0
// lower numbers = faster playback
playbackConst = 500,
// get page height from video duration
setHeight = document.getElementById("set-height"),
// select video element
vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option
// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});
// Use requestAnimationFrame for smooth playback
function scrollPlay(){
var frameNumber = window.pageYOffset/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
And it work in all browsers with the video of codepen but when I put my test video, it's not smooth, I try a lot of differents codecs or formats (example with my test video : http://www.dugautiertheo.fr/videoscroll/).
I don't know why but it work fine and very smooth on Safari only.
Can you help me ?
Thank you
Per the first comment listed, it does appear to be something with the video. However, one additional thing to try would be to supply multiple video source files per the code provided in codepen.io this way you let the browser decide what is the best video type/codec to use. As shown below:
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/webm; codecs="vp8, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>
Problems arise, when grabing single frames in an highly compressed video container format like .mp4 etc with js. Our solution was to provide the video as a .json in a lottie animation:
scroll video example
You can check the source code.

How can I Set a end time value to a video played on a browser using HTML?

I have a video which is around 50secs in length. I want that only the first 30secs of the video to be played. I have created a HTML code which renders the video on a webpage but it plays all the 50secs. I want only the first 30secs to be played.
Reference MDN
Specifying playback range
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]
The time can be specified as a number of seconds (as a floating-point value) or as an hours/minutes/seconds time separated with colons (such as 2:05:01 for 2 hours, 5 minutes, and 1 second).
A few examples:
http://example.com/video.ogv#t=10,20
Specifies that the video should play the range 10 seconds through 20 seconds.
http://example.com/video.ogv#t=,10.5
Specifies that the video should play from the beginning through 10.5 seconds.
http://example.com/video.ogv#t=,02:00:00
Specifies that the video should play from the beginning through two hours.
http://example.com/video.ogv#t=60
Specifies that the video should start playing at 60 seconds and play through the end of the video.
here's the code that will only play the first maxTime seconds and then pause
var video = document.getElementById("video");
video.play();
var maxTime = 10;
video.addEventListener("progress", function(){
if(video.currentTime >= maxTime){
video.pause();
}
}, false);
<video id='video'
preload='none'
poster="https://media.w3.org/2010/05/sintel/poster.png">
<source id='mp4'
src="https://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4'>
<source id='webm'
src="https://media.w3.org/2010/05/sintel/trailer.webm"
type='video/webm'>
<source id='ogv'
src="https://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>

Control Netflix player using JavaScript

I would like to make a Chrome extension that is able to control the Netflix player.
The current Netflix player is written in HTML5 as far as I can tell, so I was wondering if there is a way to control the player, e.g. play, pause, volume control and changing the position of the video.
I've tried using this to control the playing and pausing functions and it works.
document.getElementsByClassName("player-control-button player-play-pause")[0].click();
I've also tried using but then I just get an error saying that videoPlayer() isn't a function
netflix.cadmium.objects.videoPlayer();
Is there something similar I can do to change the volume and the position of the video?
Thanks!
First get the <video> element as variable e.g. by:
media = document.getElementById("netflixVideoPlayer");
After that you can control the volume.
To mute the sound:
media.volume = 0
Turn the volume to 100%:
media.volume = 1
Turn the volume to 60%:
media.volume = 0.6
Start the video:
media.start();
Pause the video:
media.pause();

Categories