I am coding an e-card for fathers day but i have run into some problems- my code for playing audio doesn't make the music play. Any advice on how fix this would be much appreciated. Here is the code for the music:
<audio autoplay loop>
<source src="Republic - Rád gondoltam.mp3">
</audio>
And here is the code for the whole thing.
<html>
<head>
<title>Happy Father's Day</title>
<style>
img {
margin: 0;
position: absolute;
top: 50%;
left: 50%
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="Republic - Rád gondoltam.mp3">
</audio>
<center>
<img src="output_tzHVLY.gif" />
</center>
</body>
</html>
You have to add the file type:
<audio autoplay loop>
<source src="Republic - Rád gondoltam.mp3" type="audio/mpeg">
</audio>
Also, I would check for the exact name of the file - "Republic - Rád gondoltam.mp3" seems to be a not-so-good filename (includes spaces and special charcter á) - maybe change the filename to something like "republic_rad_gondoltam.mp3"
Related
I tried making a looping background video but only the video controls are being displayed on the page, the rest is blank.
<section id="portfolio-cover" data-height="fullscreen">
<div>
<video id="background-video" playsinline autoplay muted loop width="320" height="240" opacity= 50 controls >
<source src="chicago.mp4" type="video/mp4">
</video>
</div>
</section>
I think the problem here is that the src is not being called correctly, is the file in the same folder as your html file? Or is it a link? Because I tested this out with a video link and a proper file path to the video and it works perfectly fine. Try double checking the path of your video file or if its a link, comment it here, so I can show you how to write it down in src=""
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>videobg</title>
<style>
.mainblock{width:100%; float:left; margin:0 auto; padding:0; height:100vh; position:relative; overflow:hidden;}
.mainblock #video-background{
position: absolute;
left: 0;
right:0;
margin:0 auto;
bottom: 0;
min-width: 100%;
min-height: 100%;
width:100%;
}
#media screen and (max-width:1024px){
.mainblock #video-background{width:auto; height:100vh;}
}
</style>
</head>
<body>
<div class="mainblock">
<video preload="metadata" id="video-background" controls="" autoplay="" loop="" playsinline="" muted="">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
Full screen Video tag html
This question already has answers here:
How can I preload a page using HTML5?
(5 answers)
Closed 1 year ago.
I just wanna know, how to preload a html file or a video in html before that page is opened. Because I wanna a guy. Like if he opens the site and click a button, immediately a new page would come and play the video... Also I wanna disable the video controls too... Is it possible? and if possible, how to do it?
This will allow preload and autoplay the video on a new page
/index.html
Click to play
/video.html
<video width="320" height="240" autoplay muted preload="auto">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
or if you just want to open the video on the same page like a modal you'll need javascript and css
/index.html
<style>
#modal{
display:none;
position:absolute;
z-index:10;
top:20;
left: 50%;
transform: translate(-50%, 0);
background: black;
}
</style>
<body>
<button id="playBtn">Click to play</button>
<div id="modal">
<video id="vid" width="320" height="240" autoplay muted preload="auto">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
document.querySelector('#playBtn').addEventListener('click',function(){
document.querySelector('#modal').style.display = 'block';
document.getElementById('vid').play();
})
</script>
</body>
Safari and chrome browsers blocks video autoplay unless it is muted.
How can I add border-radius to the <video> tag.This is what my video looks like right now:
(image is here: <a href="https://i.stack.imgur.com/izKz0.png")
I already tried doing the video tag with css but it doesn't change.
Here is the code:
/*CSS*/
video {
border-radius: 10px;
}
<!HTML!>
<div class="fp-player">
<center>
<div id="instructions">
<video id="my_video_1" class="video-js vjs-default-skin" width="320" height="240"
controls preload="none" data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }' poster="https://example.org/image.png">
<source src="https://example.org/video.mp4" type='video/mp4' />
</video>
</center>
</div>
Wrap the video in a div and give it this styling,
div {
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 320px;
width: 480px;
}
I found this answer at Adding border-radius for embedded YouTube video
Try clearing your browsing history.
Here is an example that may help
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
#video1 {
border-radius:10px;
}
</style>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="320" height="240" controls preload="none">
<source src="https://example.org/video.mp4" type='video/mp4' />
</video>
</body>
</html>
Add "border-radius:10px;" to the style of the video.
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 need to place the <audio> in top right corner. How to do it?
I tried with the <object> but then I get black bars around the audio player.
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<center>
<body style="background-color: brown">
<h1 style="color:white; font-size:80px">Hello</h1>
<p style="font-size:50px">I like <span style="color:green">turtlez</p>
<audio controls>
<source src="hello.mp3" align="right" type="audio/mpeg">
</audio>
</body>
</center>
Place your audio element into a container, then align the container.
E.g.
<div class="container">
<audio controls>
<source src="hello.mp3" align="right" type="audio/mpeg">
</audio>
</div>
.container {
max-width:200px;
position:absolute;
top:0;
right:0;
}
Try using this code :
audio {
float: right;
margin-top:0;
}
<audio controls src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">
Your user agent does not support the HTML5 Audio element.
</audio>
Make sure your src file is included.
Hope it works.