Making Music Playlist - html

I'm trying to make a music website to display my music. I figured out to how to somewhat make a creative player by putting my songs in a box. However, I don't know how to add text to my boxes. Whenever I add text to the it expands the box, making it uneven. Does anyone have any tips on how to add text without making the box uneven?
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 290px;
padding: 25px;
margin: 20px;
}
</style>
</head>
</style>
<body>
<div>
<audio controls>
<source src="Too High.ogg" type="audio/ogg">
<source src="Too High.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div>
<audio controls>
<source src="Visions of the mind.ogg" type="audio/ogg">
<source src="Visions of the mind.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div>
<audio controls>
<source src="Let me know.ogg" type="audio/ogg">
<source src="Let me know.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>


You can use min-height to set all the divs to a similar minimum height
div {
background-color: lightgrey;
width: 290px;
padding: 25px;
margin: 20px;
min-height:110px; /*CHANGE THIS NUMBER */
}
<div>
<audio controls>
<source src="Too High.ogg" type="audio/ogg">
<source src="Too High.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
</div>
<div>
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
<audio controls>
<source src="Visions of the mind.ogg" type="audio/ogg">
<source src="Visions of the mind.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div>
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
<audio controls>
<source src="Let me know.ogg" type="audio/ogg">
<source src="Let me know.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>

Related

Why video is not visible in HTML

<div id="small_cont1">
<video controls>
<source src="\Frontend\compileonline.mp4" type="video/mp4">
<!-- <source src="\Frontend\compileonline.mp4" type="video/ogg"> -->
Your browser does not support HTML video.
</video>
</div>
Everything is working fine - the control bar appears, the video gets downloaded but the video is not visible.

Music doesn't work in my codding. What's the wrong?

<!DOCTYPE html>
<html>
<body>
<audio autoplay="autoplay">
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</body>
</html>
ıt seems that work at W3school but i couldn't make it in my browser. I tried it chrome and firefox but it doesn't work. What's the wrong? I'm new about codding

You're supposed to put
<audio controls autoplay>
instead of
<audio autoplay="autoplay">

Is there code to display alternate webpage if visiter's connection is very poor?

On the homepage of our website, we have a video that autoplays which you can click to enter the main site.
However when some people visit the website it does not load due to poor connection, and that page is left blank so they cannot access the site. Is there a way to detect if connection is slow and show an alternate text or webpage?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
html{
width:100%;
height:100%;
}
body {
background: black;
position:fixed;
width: 100%;
height: 100%;}
</style>
<audio autoplay>
<source src="http://files.cargocollective.com/598079/vape-sound_mixdown.mp3" type="audio/mpeg">
</audio>
<body bgcolor="black">
<video playsinline id="video1" width="100%" autoplay onended="run()" poster=“650mAh”>
<source src="img/lores/vape_text_openingSMALLER.mp4" type="video/mp4">
<source src="img/lores/vape_text_openingSMALLER.ogv" type="video/ogg">
<source src="/img/lores/vape_text_openingSMALLER.webm" type="video/webm">
650mAh
<object data="movie.mp4" width="100%">
<embed width="100%" src="movie.swf">
</object>
</video>
<a href="/650mah.html">
<video playsinline id="video2" width="100%" poster="http://650mah.com/img/650loop.gif" loop>
<source src="img/lores/vape_text_loopSMALL.mp4" type="video/mp4">
<source src="img/lores/vape_text_openingSMALL.ogv" type="video/ogg">
<source src="img/lores/vape_text_loopSMALL.webm" type="video/webm">
<object data="loop.mp4" width="100%" >
<embed width="100%" src="loop.swf">
</object>
</video>
</a>
<script>
$( "#video2" ).hide();
function run(){
$( "#video1" ).hide();
$( "#video2" ).show();
document.getElementById("video2").play();
};
</script>

I haven't tried it myself, but it's possible with JavaScript to determine the internet speed. Take a look at the link below.
How to detect internet speed in JavaScript?
If the internet connection is too slow, you could redirect to a different page using JavaScript/jQuery

One other approach is that you can have a single web page and display an image or text as an alternative until the video has loaded.
The HTML5 'canplaythrough' event is fired when the browser has the video donbwloaded and play it all:
https://developer.mozilla.org/en-US/docs/Web/Events/canplaythrough
When this fires you can replace the image or text with the video.

I'm trying to play video using html 5 but its not working

Here is the code what i'm using
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
Big Buck Bunny.
</p>
</body>
</html>
i'm using Mozilla browser and its version is 4.3

How to make a video grid?

I have a page that tries to display 4 videos in a 2x2 grid, but I currently have two problems.
There is space between videos
They are all in one column
Here is my current code:
<!DOCTPYE html>
<html>
<head>
<title>Memorabilia</title>
<style>
body {
margin: 0px;
}
video {
width: 50%;
}
</style>
</head>
<body>
<video autoplay loop muted>
<source src="a.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="b.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="c.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="d.mp4" type="video/mp4">
</video>
</body>
</html>
P.S. I don't want the videos to be of a fixed size, I want two videos in each row, that's why I put 50% in the width.

You need to just add float: left; in video tag.
body {
margin: 0px;
}
video {
width: 50%;
float: left;
}
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>