this is my html code, its work but with no sound!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style>
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo" width="320" height="240" >
<source src="https://4.top4top.net/m_1348rq2js1.mp4" type="video/mp4">
</video>
</body>
</html>
i want it play with full sound volume and full screen
can anyone help?
thanks.
Related
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive HTML sites</title>
</head>
<body>
<picture>
<source srcset="marbled.jpg" media= "(max-width: 600px)">
<source srcset="rolemodel.jpg" media= "(max-width: 1400px)">
<source srcset="supalonely.jpg">
</picture>
</body>
</html>
This is my code and when I run it on chrome, there are no warnings or display. All the images are in the same folder and when I add img before source, it shows all the images, instead of showing it according to device-width
You needed to add an <img> along with the sources. Link to more on <picture>.
Example code below will change image on screen re-size. Hope this helps
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive HTML sites</title>
<style type="text/css">
source, img{
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<picture>
<source srcset="https://9to5google.com/wp-content/uploads/sites/4/2019/03/google-images-material-theme.jpg?quality=82&strip=all&w=1600" media= "(max-width: 600px)">
<source srcset="https://dg.imgix.net/do-you-think-you-re-happy-jgdbfiey-en/landscape/do-you-think-you-re-happy-jgdbfiey-9bb0198eeccd0a3c3c13aed064e2e2b3.jpg?ts=1520525855&ixlib=rails-4.0.1&auto=format%2Ccompress&fit=min&w=700&h=394&dpr=2&ch=Width%2CDPR" media= "(max-width: 800px)">
<img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png">
</picture>
</body>
</html>
<div class="col-lg-6 col-md-8 embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" width="100%" controls="controls">
<source src="files/video.mp4" type="video/mp4">
</video>
</div>
I have tried different things but the video width won't fit the controls. I noticed that if I don't specify the width and set the Height to "auto" it does fit perfectly but the controls don't show anymore.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>page1</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.center{
position: fixed;
right: 0em;
top: 0em;
min-width: 100%;
min-height: 90%;
image-resolution: 90%;
}
</style>
</head>
<body>
<video class="center" width="100%" loop="true" autoplay="autoplay" controls muted>
<source src="files/video.mp4" type="video/mp4"/>
</video>
</body>
</html>
Try adding fullscreen styles! and never forget to mute if you wanna autoplay!
Okay I have a simple page that autoplays and loops music in the background:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>One Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
#showcase {
background-image: url('test.jpeg');
background-size: cover;
background-position: center;
height: 100vh;
}
</style>
</head>
<body>
<main id="showcase">
<audio autoplay loop>
Your browser does not support the
<code>audio</code> element.
<source src="music.mp3" type="audio/mp3">
</audio>
</main>
</body>
</html>
This code works great on Chrome and Firefox, but it doesn't work on Safari.
The image is not responsive (full screen) and the audio isn't playing, I get:
Your browser does not support the audio element.
on the page.
I download the latest version of Safari on my windows. I've tried a couple of solutions, but none some to work.
I haven't seen any solutions for the mp3 format.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
</head>
<body style="width: 100%; height: 100%">
<table cellspacing="1" style="width: 100%; height: 100%">
<tr>
<td valign="middle" align="center">
<h1>Hello World</h1>
</td>
</tr>
</table>
</body>
</html>
The result of that html snippet is the word Hello World is on top of the screen. I did everything to make it in the middle. What can I do?
I tried another way using vertical align style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How to get Sexier Avatar in IMVU 2</title>
</head>
<body style="width: 100%; height: 100%">
<div style="height: 100%;width: 100%;vertical-align: middle">
<h1>Click here to Get Game and See Yourself</h1>
</div>
</body>
</html>
I clearly said that the vertical align for the div should be middle. It doesn't work.
It seems that the size of the body is not fullscreen. How do I make it full screen?
<!doctype HTML>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<style>
#centerInScreen {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#centerInScreen h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="centerInScreen">
<h1>Hello World!</h1>
</div>
</body>
</html>
Use this to center in screen.
Use CSS
<div class="center">Hello World</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
I'm having some issues with video for mobile and HTML5. My biggest problem is that the video will play like 2 seconds and stop because not enough of the video has loaded. The video is 1:26s long and 9mb. I was testing on wifi. Is there a way that I can make the video wait til enough has loaded so it can play without issues? or what is my best option to help solve this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
</script>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-color:#000;
}
-->
</style>
</head>
<body>
<!--<div id = "m_loader">
<div id = "loading_hold">
<img src="d_logo.png" width="365" height="500" />
</div>
</div>-->
<video controls="controls" autoplay="autoplay">
<source src="reel720_3.mp4" type="video/mp4" />
<source src="reel720_3.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
You can use the "canplaythrough" event. Though you may want to show some sort of progress/download indicator while this is happening.
myVideo.addEventListener('canplaythrough', function() {
myVideo.play();
});