| View previous topic :: View next topic |
| Author |
Message |
Fulgurance
Veteran
Joined: 15 Feb 2017
Posts: 1219
|
 Posted: Fri Mar 13, 2020 7:55 pm Post subject: HTML - Problem with video background wallpaper |
 |
|
Hello, actually i make website for me and my friend, and i have problem.
I have put a video to make animated banner on my website.
But i have 2 problems. I have set "muted" option into balise, but:
-When i do right click into video, user can enter into video settings and modify video behavior.
-When i go to my website with my smartphone, when my video wallpaper start, in notification, i have my video displayed into the system media player. How can i disable that ? (it's strange because it's muted) |
|
| Back to top |
|
 |
Banana
Veteran
Joined: 21 May 2004
Posts: 1417
Location: Germany
|
|
| Back to top |
|
|
Fulgurance
Veteran
Joined: 15 Feb 2017
Posts: 1219
|
| Posted: Fri Mar 13, 2020 9:23 pm Post subject: |
|
|
| Code: | <!DOCTYPE html>
<html lang="fr">
<!-- Head -->
<head>
<title><?php include('Texts/HeadTitle.txt');?></title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<link rel="icon" type="image/png" href="Pictures/WebSiteIcon.png"/>
<link rel="stylesheet" href="CSS/Title.css"/>
<link rel="stylesheet" href="CSS/Description.css"/>
<link rel="stylesheet" href="CSS/OurVision.css"/>
<link rel="stylesheet" href="CSS/OurTeam.css"/>
<link rel="stylesheet" href="CSS/Footer.css"/>
</head>
<!-- Body -->
<body>
<!-- Title -->
<section class="Title">
<video autoplay loop muted poster>
<source src="Videos/HeaderWallpaper.mp4" type="video/mp4"/>
</video>
<div class="TextTitle">
<h1><?php include('Texts/BodyTitleH1.txt');?></h1>
<h4><?php include('Texts/BodyTitleH4.txt');?></h4>
</div>
</section>
<!-- Description -->
<section class="Description">
<div class="TextDescription">
<h1><?php include('Texts/BodyDescriptionH1.txt');?></h1>
<p><?php include('Texts/BodyDescriptionP.txt');?></p>
</div>
</section>
<!-- OurVision -->
<section class="OurVision">
<div class="TextOurVision">
<h1><?php include('Texts/BodyOurVisionH1.txt');?></h1>
<p><?php include('Texts/BodyOurVisionP.txt');?></p>
</div>
</section>
<!-- OurTeam -->
<section class="OurTeam">
<div class="TextOurTeam">
<h1><?php include('Texts/BodyOurTeamH1.txt');?></h1>
<p><?php include('Texts/BodyOurTeamP.txt');?></p>
</div>
</section>
</body>
<!-- Footer -->
<footer class="Footer">
<div class="LinkFooter">
<div class="ContactFooter">
<h5><?php include('Texts/FooterContactH5.txt');?></h5>
<address>
<a href="mailto:contact@trading-online.fr"><?php include('Texts/FooterContactA.txt');?></a>
</address>
</div>
<div class="SocialFooter">
<h5><?php include('Texts/FooterSocialH5.txt');?></h5>
<a href="https://fr-fr.facebook.com/">
<img src="Pictures/Facebook.png" alt="Facebook"/>
</a>
<a href="https://www.instagram.com/">
<img src="Pictures/Instagram.png" alt="Instagram"/>
</a>
<a href="https://twitter.com/">
<img src="Pictures/Twitter.png" alt="Twitter"/>
</a>
<a href="https://fr.linkedin.com/">
<img src="Pictures/Linkedin.png" alt="Linkedin"/>
</a>
<a href="https://www.youtube.com/">
<img src="Pictures/Youtube.png" alt="Youtube"/>
</a>
</div>
</div>
<div class="CreditFooter">
<a href="https://icons8.com"><?php include('Texts/FooterA.txt');?></a>
</div>
</footer>
</html>
|
|
|
| Back to top |
|
|
Banana
Veteran
Joined: 21 May 2004
Posts: 1417
Location: Germany
|
|
| Back to top |
|
|
Fulgurance
Veteran
Joined: 15 Feb 2017
Posts: 1219
|
| Posted: Sat Mar 14, 2020 5:05 pm Post subject: |
|
|
Okay, i have doing this, but it's the first time i use JavaScript.
What is the error ?
PHP page:
| Code: | <!DOCTYPE html>
<html lang="fr">
<!-- Head -->
<head>
<title><?php include('Texts/HeadTitle.txt');?></title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<link rel="icon" type="image/png" href="Pictures/WebSiteIcon.png"/>
<link rel="stylesheet" href="CSS/Title.css"/>
<link rel="stylesheet" href="CSS/Description.css"/>
<link rel="stylesheet" href="CSS/OurVision.css"/>
<link rel="stylesheet" href="CSS/OurTeam.css"/>
<link rel="stylesheet" href="CSS/Footer.css"/>
</head>
<!-- Body -->
<body>
<!-- Title -->
<section class="Title">
<video id="VideoTitle" autoplay loop muted poster>
<source src="Videos/HeaderWallpaper.mp4" type="video/mp4"/>
</video>
<div class="TextTitle">
<h1><?php include('Texts/BodyTitleH1.txt');?></h1>
<h4><?php include('Texts/BodyTitleH4.txt');?></h4>
</div>
</section>
<!-- Description -->
<section class="Description">
<div class="TextDescription">
<h1><?php include('Texts/BodyDescriptionH1.txt');?></h1>
<p><?php include('Texts/BodyDescriptionP.txt');?></p>
</div>
</section>
<!-- OurVision -->
<section class="OurVision">
<div class="TextOurVision">
<h1><?php include('Texts/BodyOurVisionH1.txt');?></h1>
<p><?php include('Texts/BodyOurVisionP.txt');?></p>
</div>
</section>
<!-- OurTeam -->
<section class="OurTeam">
<div class="TextOurTeam">
<h1><?php include('Texts/BodyOurTeamH1.txt');?></h1>
<p><?php include('Texts/BodyOurTeamP.txt');?></p>
</div>
</section>
</body>
<!-- Footer -->
<footer class="Footer">
<div class="LinkFooter">
<div class="ContactFooter">
<h5><?php include('Texts/FooterContactH5.txt');?></h5>
<address>
<a href="mailto:contact@trading-online.fr"><?php include('Texts/FooterContactA.txt');?></a>
</address>
</div>
<div class="SocialFooter">
<h5><?php include('Texts/FooterSocialH5.txt');?></h5>
<a href="https://fr-fr.facebook.com/">
<img src="Pictures/Facebook.png" alt="Facebook"/>
</a>
<a href="https://www.instagram.com/">
<img src="Pictures/Instagram.png" alt="Instagram"/>
</a>
<a href="https://twitter.com/">
<img src="Pictures/Twitter.png" alt="Twitter"/>
</a>
<a href="https://fr.linkedin.com/">
<img src="Pictures/Linkedin.png" alt="Linkedin"/>
</a>
<a href="https://www.youtube.com/">
<img src="Pictures/Youtube.png" alt="Youtube"/>
</a>
</div>
</div>
<div class="CreditFooter">
<a href="https://icons8.com"><?php include('Texts/FooterA.txt');?></a>
</div>
</footer>
<script src="JavaScript/VideoTitle.js"></script>
</html>
|
JavaScript code:
| Code: | var VideoTitle = document.getElementById("VideoTitle");
VideoTitle.controls = false;
VideoTitle.autoplay = true;
VideoTitle.defaultMuted = true;
VideoTitle.loop = true;
|
I try to get video by ID. I have checked into mozilla firefox, no bug. It's strange... i have impression my script isn't executed |
|
| Back to top |
|
|
Banana
Veteran
Joined: 21 May 2004
Posts: 1417
Location: Germany
|
| Posted: Sun Mar 15, 2020 7:08 pm Post subject: |
|
|
first some advice
1. use lowercase filenames. You will run into trouble if you mix different OS
2. Use lowercase CSS definitions
3.The example you posted does not really show the need to use php
4. JS includes or inline scripts should be in the header unless they block page rendering
I've build some small example which can be viewed here: https://delta-labs.org/sp/BZ0
I've included two more examples which might help you.
_________________
My personal space
My delta-labs.org snippets do expire
PFL - Portage file list - find which package a file or command belongs to. |
|
| Back to top |
|
|
Fulgurance
Veteran
Joined: 15 Feb 2017
Posts: 1219
|
| Posted: Mon Mar 16, 2020 1:49 pm Post subject: |
|
|
Thanks you for your reply.
Coding with uppercase isn't forbidden. I would like to use Uppercase.
I use php because in futur i have provide to use it.
Your "advices" don't solve my problem. You just talk about my coding style, not about the real problem...
And use javascript at the header it's very bad habit, because this it makes the loading of the page heavier.
And this is outdated... It's html 4. In html5, type isn't usefull
| Code: | | <script type="text/javascript"> |
|
|
| Back to top |
|
|
Banana
Veteran
Joined: 21 May 2004
Posts: 1417
Location: Germany
|
|
| Back to top |
|
|
AlexJGreen
Tux's lil' helper
Joined: 19 Sep 2018
Posts: 149
|
| Posted: Mon Mar 16, 2020 3:35 pm Post subject: |
|
|
_
Last edited by AlexJGreen on Mon Dec 28, 2020 3:16 am; edited 1 time in total |
|
| Back to top |
|
|
Hu
Administrator
Joined: 06 Mar 2007
Posts: 21789
|
| Posted: Tue Mar 17, 2020 2:22 am Post subject: |
|
|
| As a friendly warning, your description of how this page is supposed to work makes it sound like a page I would close immediately and never return to. Backgrounds should be simple and static, preferably solid colors, possibly gradients if the transition is gradual, but definitely not moving images. Automatic play is evil. Blocking user access to controls is rude. |
|
| Back to top |
|
|
|
Unsupported Software
