I tried the simplest example on Chrome:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>.</title>
<link rel="shortcut icon" href="surprise.png" type="image/x-icon">
<link rel="stylesheet" href="/styles/style.css">
</head>
<body>
<div class="overlay" id="overlay">
<div class="body">
<h2 class="bodytitle">Click "Yes"!</h2>
<div class="bodybutton">
<button id="accept-button" class="button">Yes</button><br>
<button id="decline-button" class="button1">No</button>
</div>
</div>
</div>
<div class="video">
<video id="video" class="scare" loop="" src="video.mp4">
</div>
<script src="/styles/style.js"></script>
</body>
</html>
I tried this on Chrome, it didn't show the video, and the console doesn't show any errors.
Any answers?
You can try this :
<video id="video" class="scare" loop="" src="video.mp4" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.mp4" type="video/ogg">
</video>
Related
I am trying to add music to my HTML website, but when I run the code, it doesn't work! Any help is apricated. I have the music in the same directory.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<embed name="22 - Edited" src="22 - EDITED.mp3" loop="false" hidden="true" autostart="true">
<div class="main">
<h1>Crimson</h1>
<hr>
Play
</div>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</head>
<body>
<audio id="myAudio" src="./22 - EDITED.mp3" controls>
<hr>
<audio controls id="myAudio">
<source src="./22 - EDITED.mp3" type="audio/ogg">
<source src="./22 - EDITED.mp3" type="audio/mpeg">
</audio>
</body>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</html>
Auto play:
document.getElementById("myAudio").autoplay;
then hide element audio with css attribute:
audio{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
I need to know if this is outdated and if you can insert local files
Your code references local images. This snippet is a clone of yours -- all I've done is change the images to web-accessible images. So your code is fine. If images are not appearing, it's because they can't be found.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source media="(min-width: 650px)" srcset="https://img.traveltriangle.com/blog/wp-content/uploads/2018/12/cover-for-street-food-in-sydney.jpg">
<source media="(min-width: 465px)" srcset="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2019-honda-civic-sedan-1558453497.jpg?crop=1xw:0.9997727789138833xh;center,top&resize=480:*">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2019/07/145-Best-Pretty-Girls-Quotes-1-624x702.jpg" style="width:auto;">
</picture>
<!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>
I am trying to make the mainpage.html to load the video.mp4 in the css folder. I have tried to copy the video file in all the folders. But I simply can not make it play the video I have a blank white page.
root
--static
--video.mp4
--css
--mainpage.css
--templates
--MainPage.html
--env
--__pycache__
My HTML code looks as follows in mainpage.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{{ url_for('static', filename='css/frontpage.css') }}"
<link rel="stylesheet" href="{{ url_for('static', filename='video1.mp4') }}">
<link rel="stylesheet" href="../static/frontpage.css">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<head>
<div id="videoBC">
<video id="videoBG" poster="poster.JPG" autoplay muted loop>
<source src="video1.mp4" type="video/mp4">
</video>
</html>
Your HTML seems a bit ... interesting.
How about:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/frontpage.css') }}" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<div id="videoBC">
<video id="videoBG" poster="{{ url_for('static', filename='poster.JPG') }}" autoplay muted loop>
<source src="{{ url_for('static', filename='video1.mp4') }}" type="video/mp4">
</video>
</div>
</body>
</html>
I currently have a website with the following code:
<!DOCTYPE html>
<html>
<head>
<title>ProximityMC.com</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="logo"><img src="http://cravatar.eu/head/ProximityMC/500.png" alt="ProximityMC" /></div>
</div>
<audio loop autoplay>
<source src="mmm_yeah.mp3" type="audio/mpeg">
</audio>
</body>
</html>
That's okay but I am looking to put some other music on there so once the first song is played then the second one starts etc.
Many Thanks
You must write
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support the audio elemet.
</audio>