Develop Reference

html5 video dropdown quality hls.js

I'm use a tag html5 video + hls.js for video streaming .m3u8
<div class="container-video">
<video id="video"
width="700"
height="400"
preload="auto"
controls>
<source [src]="videoLink" type="application/x-mpegURL">
</video>
</div>
playVideoLive(videoLink) {
const video = document.getElementsByTagName('video')[0];
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoLink);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoLink;
video.addEventListener('canplay', function () {
video.play();
});
}
}
Hoe i can show the dropdown with the list of quality video?

You can use an extra package to add the a track selector - there may be others but this one seems quite popular: https://www.npmjs.com/package/videojs-hls-quality-selector
You can also add your own controls and do it via the API using: https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlscurrentlevel
There is a demo which uses the API here (at the time of writing) - go to the bottom of the demo page to see the levels and you can click on them there: https://hls-js-dev.netlify.app/demo/

How do I make a random video play on pageload?

I'm trying to make a random video player in html/js.
It is supposed to play a different video on pageload and as soon as one video is over, it should play another one.
HTML
<video width="320" height="240" autoplay>
<source src="abcdefg.com/example1.mp4" type="video/mp4">
<source src="abcdefg.com/example2.mp4" type="video/mp4">
</video>
JS
<script>
var videos = [
[{type:'mp4', 'src':'abcdefg.com/example1.mp4'}],
[{type:'mp4', 'src':'abcdefg.com/example2.mp4'}],
];
$(function() {
var number = Math.floor(Math.random()*videos.length);
$(this).find('source').each(function(index){
videoSrc = videos[number][index].src;
$(this).attr('src', videoSrc);
$('video').load();
$('video').play();
});
});
</script>
However, my current code plays the same video every page reload and as soon as it's over, nothing happens.
How do I need to optimize my code so it automatically plays a different video on every pageload + when the previous video is over?

Try this,I have added an event listener to video end property and called the newvideo() function ,so that every time the video finishes a new random video is loaded from array.I could'nt find more video urls ,you can test and let me know if it works for you.
$(document).ready(function(){
var videos = [
[{type:'mp4', 'src':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'}],
[{type:'mp4', 'src':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'}],
[{type:'mp4', 'src':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'}]
];
// selecting random item from array,you can make your own
var randomitem = videos[Math.floor(Math.random()*videos.length)];
// This function adds a new video source (dynamic) in the video html tag
function videoadd(element, src, type) {
var source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
// this function fires the video for particular video tag
function newvideo(src)
{
var vid = document.getElementById("myVideo");
videoadd(vid,src ,'video/ogg');
vid.autoplay = true;
vid.load();
//vid.play();
}
// function call
newvideo(randomitem[0].src)
// Added an event listener so that everytime the video finishes ,a new video is loaded from array
document.getElementById('myVideo').addEventListener('ended',handler,false);
function handler(e)
{
newvideo(randomitem[0].src)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video width="320" height="240" autoplay id="myVideo">
</video>

How to get hls video width/height in javascript?

I use video tag to play HLS video, and the video size is 0 always.
<video id=video src="http://xxx.m3u8" autoplay controls/>
<script>
const video = document.getElementById('video')
video.addEventListener('play', () => {
console.log(video.videoWidth, video.videoHeight)
// both are 0
})
</script>

Currently desktop browsers do not support playing an HLS video directly using just the video tag. (Maybe it does work on Safari or IOS).
To reproduce an HLS stream you need to use one of the video players available. You have some open source projects, like hlsjs: https://github.com/video-dev/hls.js. Or comercial players like flowplayer, or jwplayer.
Basic html code using hlsjs player:
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<video id="video"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>

"loadedmetadata" wont' work for HLS streams, so this is the best solution
var video = document.getElementById("video")
video.onplaying = function () {
var width = video.videoWidth
var height = video.videoHeight
console.log("video dimens loaded w="+width+" h="+height)
}

How to pause/stop playing audio and replace with new audio file

So when the user clicks a button an audio file plays from an array of audio files(around 2 sec clip), which works fine. However, if the user repeatedly clicks the button, the audio files start to play over each other. Ideally, I would like to stop/pause the previous audio file and then play the new audio file. This is what I've tried to avail:
$scope.sounder=function(){
$scope.rs=$scope.diff[$scope.workout_index].audiorep;
$scope.ms=$scope.diff[$scope.workout_index].audiomove;
//var movesound = new Audio ($scope.ms);
//ar repsound = new Audio ($scope.rs);
var movesound = new Media($rootScope.getMediaURL($scope.ms));
var repsound = new Media($rootScope.getMediaURL($scope.rs));
if($scope.muter==0){
movesound.pause();//DOES NOT WORK
movesound.stop();//STOPS ALL AUDIO FROM PLAYING, SO NOTHING PLAYS
$timeout(function() {
movesound.play();
}, 1000);
$timeout(function() {
repsound.play();
}, 3000);
}
if($scope.muter==1){
console.log("Rachel has been muted");
return;
}
}

You can achieve the functionalities with JavaScript in Cordova unless you specifically need AngularJS in your app.
<audio controls id="myAudio">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the HTML5 audio tag.
</audio>
Now using script to add functionalities -
<script>
var aud= document.getElementById("myAudio");
function playAud() {
aud.play();
}
function pauseAud() {
aud.pause();
}
function myFunction() {
isSupp = aud.canPlayType("audio/mp3");
if (isSupp == "") {
aud.src = "audio.ogg";
} else {
aud.src = "audio.mp3";
}
aud.load();
}
</script>
See other answers of this question on for changing source of audio with JavaScript.
Refer w3schools HTML Audio Video DOM reference Page for further attributes and functions.

Start playing HTML5 Video only after the complete video is buffered

Is there a way I can start playing my HTML5 MP4 video only after the entire video is buffered (100%). When it is in the process of buffering, I should display the Loading screen. Please help. This code should work in both Firefox and IE11.
Hyperlink Titles Example :
- Play Video1: Fav Foods - Play Video1: Fav Veg - Play Video2: Fav Animal
And here is the code I have when I click on the hyperlink and also the Video tags. I load the video dynamically from the database. The attribute 'pos' tells the time in seconds where the player has to seek playing.
<video id="VideoContainer" controls="controls" style="width:500px;height:320px" preload="auto">
<source id="VideoData" src=#Model.IntroVideoPath type="video/mp4" />
Your browser does not support the video tag.
<a onclick="navVideo('#items.FileName','#items.StartSec');">#items.DisplayText</a>
function navVideo(fileName, pos) {
//Get Player and the source
var player = document.getElementById('VideoContainer');
var mp4Vid = document.getElementById('VideoData');
var mp4CurVid = $(mp4Vid).attr('src');
//Reload the player only if the file name changes
if (mp4CurVid != fileName) {
$(mp4Vid).attr('src', fileName);
player.load();
player.play();
if (pos != 0) {
setTimeout(function () {
player.currentTime = pos;
player.play();
}, 1000);
}
}
else {
player.pause();
player.currentTime = pos;
player.play();
}

The problem was with the encoding technique for that MP4 file. I encoded with different settings (random settings options for Mp4) and finally got that to work without buffer.

You could use the this http://videojs.com/ to get that to work.