Good afternoon,
I have am image and I want to embed the MP3 file associated with the image into/onto the image, instead of having the MP3 under the image.
Is this at all possible.
Kind regards
Gary
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img src="Logoghp.jpg" width="224" height="134" alt=""/><br>
<audio controls>
<embed src="Soul Train Easter 2016 Mke Vitti One Hour Mix Show.mp3" width="32" height="32"></embed>
</audio>
</body>
</html>
Create a "container" div and, inside it, insert your image and an audio element (containing at least a source and a warning message for browsers that don't support it).
Give the "container" the same height of the image, assign the audio element "relative" position, then play with top and left values, e.g.:
.audio-container {
height: 320px;
}
.audio-container audio {
position: relative;
top: -40px;
left: 10px;
}
<div class="audio-container">
<img src="http://www.battiato.it/wp-content/themes/battiato/images/about.jpg">
<br>
<audio controls>
<source src="http://www.battiato.it/wp-content/uploads/mp3/joe/1-leoncavallo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
Related
I am attempting to show a HTML video tag in a triangle display. So, as opposed to the default rectangle display; a triangle. Meaning, here's the default display:
<!DOCTYPE html>
<html>
<head>
<title>Video Default</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Notice how the default display is the rectangle form - my aim is to get the display in a triangle form - like this:
I am trying to use CSS to accomplish this task, specifically border-top-left radius and border-top-right-radius, but I can only get it to curve. Here's the code below:
video {
border-top-left-radius: 200px;
border-top-right-radius: 200px;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
</body>
</html>
The problem I'm running into, as you can see from the code snippet above, the left and right angles only curve as opposed to forming a point. Therefore, is it possible to create a triangle display of a HTML video tag using CSS border-radius? Or can someone provide some additional guidance as to what I should be using to accomplish this task?
I doubt this is possible with border-radius.
But you can achieve this with clip-path
video {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
</body>
</html>
When I open the video on OneDrive with a browser, it has no audio at all. I think there are some codec problems, but can I change anything to get the audio from the movie?
<!DOCTYPE html>
<html>
<body>
<video controls style="width: 100%; height: 100%; preload="auto" playsinline="" autoplay="" src="https://uszeged-my.sharepoint.com/personal/toth_akos_o365_u-szeged_hu/_layouts/15/download.aspx?SourceUrl=%2Fpersonal%2Ftoth_akos_o365_u-szeged_hu%2FDocuments%2FFilmek%2FThe+Witcher+S02%2FThe.Witcher.S02E01.720p.NF.WEB-DL.DDP5.1.Atmos.H.264.HUN.ENG-PTHD.mkv" type="video/mkv"></video>
</body>
</html>
Hi everyone this is my first webpage i've made and i'm trying to display a gif as backrgound and make text appear above that.. Everything works fine except i can't seem to display the text above the gif background.. As you can see in the source code i have one heading and three paragraphs, Anyone knows how to fix this?
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="http://www.iconarchive.com/download/i91751/icons8/windows-8/Systems-Linux.ico" type="image/x-icon"/>
<title>FirstWebpage</title>
<style>
body{ /* Will use a gif as background */
background-image: url('http://images.eurogamer.net/2015/articles/1/8/7/1/5/3/2/san-francisco-subway-system-hacked-passengers-get-free-rides-148033947612.gif');
background-position: relative;
background-size: cover;
}
</style>
<audio autoplay loop>
<source src="seffelinie.mp3" type="audio/mp3">
</head>
<body>
<div align="center" id="text">
<h1>First Webpage</h1>
<p>HTML</p>
<p>+</p>
<p>CSS</p>
</div>
</body>
</html>
The Audio tag was on top of the text I guess, replace with this:
<audio autoplay loop>
<source src="seffelinie.mp3" type="audio/mp3">
</audio>
Your code is a little mixed up. As stated above, you're missing the closing audio tag, but you are also closing the <head> after the audio element which should be inside the <body> tags with the rest of your html code. Lastly, I cleaned up your background image CSS to use best practices based on what I think you're intending. background-position: relative; isn't an option. background-position is not the same as position, it is for telling the browser what aspects of the parent to position the image based on — like "top center" or "bottom left". In your case since you want the image to always cover, I think you're best off centering the image vertically and horizontally in all situations, that's what background-position: center center` does.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="http://www.iconarchive.com/download/i91751/icons8/windows-8/Systems-Linux.ico" type="image/x-icon"/>
<title>FirstWebpage</title>
<style>
body{ /* Will use a gif as background */
background-image: url('http://images.eurogamer.net/2015/articles/1/8/7/1/5/3/2/san-francisco-subway-system-hacked-passengers-get-free-rides-148033947612.gif');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="seffelinie.mp3" type="audio/mp3">
</audio>
<div align="center" id="text">
<h1>First Webpage</h1>
<p>HTML</p>
<p>+</p>
<p>CSS</p>
</div>
</body>
</html>
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"
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.