6
Okay, oto co się stało.Jak naprawić film w tle, który przestał działać w niektórych przeglądarkach?
Moje wideo w tle działało wcześniej we wszystkich przeglądarkach. Nagle dziś rano przestał działać w niektórych przeglądarkach. Film nie jest już odtwarzany ani nie zawiesza się natychmiast
Oczyściłem pamięć podręczną i nic. Potem próbowałem cofnąć zmiany i nic. Próbowałem też napisać to ponownie od zera i nic.
Ostatnią rzeczą jest dodanie próbowałem ten kod skryptu:
<script> $(document).ready(function() { var vid = document.getElementById("bgvid"); vid.play(); }); </script>Strona jest www.medshopandbeyond.com.
Wideo w tle nie działa w chrome, operze, safari. Ładuje SOMETIMES na firefox i ZAWSZE gra w Internet Explorerze.
Jak mogę to naprawić? Twoja pomoc jest naprawdę doceniane
HTML Markup wideo i zawartość:
{% if template == 'index' %}
<!--<div id="slideshow-shadow"></div>-->
<div class="video-background" id="video-background">
<video loop="loop" autoplay poster="{{ 'photo-1445.jpg' | asset_url }}" width="100%">
<source src="{{ 'Newest4.mp4' | asset_url }}" type="video/mp4">
<source src="{{ 'Newest4.webm' | asset_url }}" type="video/webm">
<source src="{{ 'home.ogg' | asset_url }}" type="video/ogg">
<img alt="" src="{{ 'home-placeholder.jpg' | asset_url }}" width="640" height="360" title="No video playback capabilities, please download the video below">
</video>
<div class="headline_22">
\t <table>
<tr><td width="50%"></td><td width="50%" class="headline_content">
\t \t \t \t <h1>Beyond Limitations</h1>
\t \t \t \t <p>Med Shop and Beyond stands for Freedom, Lifestyle, Wellness and Family. We strive to provide high quality medical supplies and equipment to our customers</p>
\t \t \t </td></tr>
<tr><td width="50%"></td><td width="50%" class="tb_action">
\t \t \t \t <a href="http://www.medshopandbeyond.com/collections/all" class="btn_action_22">
\t \t \t \t \t <span>Start Shopping</span>
\t \t \t \t \t <i class="ico_arrow"></i>
\t \t \t \t </a>
\t \t \t </td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr></tr>
\t </table>
</div>
</div>CSS wideo:
div.video-background {
height: 58em;
left: 0;
overflow: hidden;
/*position: fixed;
top: 96px;*/
vertical-align: top;
width: 100%;
/*z-index: -1; */
\t margin-top:-16px;
position:relative;
margin-bottom: 0px;
-webkit-filter: brightness(95%);
-moz-filter: brightness(95%);
-khtml-filter: brightness(95%);
-ms-filter: brightness(95%);
-o-filter: brightness(95%);
}
div.video-background video {
min-height: 850px;;
min-width: 100%;
z-index: -2 !important;
}
div.video-background > div {
height: 850px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
div.video-background .circle-overlay {
left: 50%;
margin-left: -590px;
position: absolute;
top: 120px;
}
div.video-background .ui-video-background {
display: none !important;
}CSS Treści:
/*************
Call to Action Button - Style 22
******************/
.btn_action_22 {
\t background: #00559f !important; /* Change button background color */
\t border: 1px solid #00559f !important; /* Change button border color */
\t color: #fff !important; /* Change button text color */
\t line-height: 1.2;
\t font-size: 30px;
\t display: inline-block;
\t padding: 22px 45px 23px;
\t position: absolute;
\t text-decoration: none;
\t text-transform: uppercase;
\t z-index: 3;
\t white-space: nowrap;
\t -webkit-box-sizing: border-box;
\t -moz-box-sizing: border-box;
\t box-sizing: border-box;
\t float: left;
font-family: Lato;
font-weight: 100;
}
.btn_action_22 span {
\t left: 12px;
\t position: relative;
\t -o-transition: all .4s;
\t -moz-transition: all .4s;
\t -webkit-transition: all .4s;
\t transition: all .4s;
}
.btn_action_22 .ico_arrow {
\t background: url(ico_arrow_w.png) 0 center no-repeat;
\t display: inline-block;
\t height: 16px;
\t width: 18px;
\t position: relative;
\t left: 0;
\t top: 0px;
\t opacity: 0;
\t filter: alpha(opacity=0);
\t -o-transition: all .4s;
\t -moz-transition: all .4s;
\t -webkit-transition: all .4s;
\t transition: all .4s;
}
.btn_action_22:hover {
\t background: #69d617 !important; /* Change button background color when mouse over */
\t color: #000 !important; /* Change button text color when mouse over */
border:1px solid #69d617 !important;
}
.btn_action_22:hover span {
\t left: -12px;
}
.btn_action_22:hover .ico_arrow {
\t opacity: 1;
\t filter: alpha(opacity=100);
\t left: 12px;
}
/************** Headline Item *************/
.headline_22 {
\t background-image:url("{{ 'man-909049_1920.jpg' | asset_url }}");
height: 70em;
position: relative;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: -20px;
background-position: center top;
width: 100%;
margin-top: 220px;
/*border-bottom: 1px solid #e6e6e6;*/
\t color: #000 !important; /* Change headline background color */
display:inline-block;
}
.headline_22 h1 {
\t color: #000 !important; /* Change headline title text color */
\t font-size: 52px;
\t line-height: 1.2;
\t text-transform: uppercase;
\t font-weight: 100;
font-family: Lato;
\t padding: 0;
\t margin: -1px 0 9px;
background-color:#fff;
opacity:0.5;
}
.headline_22 p {
\t line-height: 1.4;
\t font-size: 39px;
\t margin: 0 0 10px;
\t padding: -10px;
font-family: Lato;
font-weight: 100;
word-spacing: -1px;
background-color:#fff;
opacity:0.5;
}
.headline_22 table {
\t border-spacing: 0;
\t width: 100%;
}
.headline_22 td {
\t vertical-align: top;
\t padding: 25px;
}
.headline_22 .headline_content {
\t padding: 20px 25px 9px;
\t text-align: justify;
}
@media (max-width: 979px) {
\t .headline_22 .headline_content {
\t \t text-align: center;
\t }
\t .headline_22 td {
\t \t display: block;
\t \t width: 100%;
\t \t -webkit-box-sizing: border-box;
\t \t -moz-box-sizing: border-box;
\t \t box-sizing: border-box;
\t }
\t .btn_action_22 {
\t \t text-align: center;
\t \t width: 100%;
margin-left: -2px;
\t }
}
@media (max-width: 479px) {
\t .btn_action_22 {
\t \t padding: 18px 30px;
margin-left: -2px;
\t }
}
można dołączyć bardziej odpowiedniego kodu w samym pytaniu, a nie odwołuje się do zewnętrznej strony? Aby uzyskać więcej informacji, zobacz https://stackoverflow.com/help/mcve –
Okay Dodałem wszystko, co mam –
Limespot plik javascript pokazuje problem w konsoli, jeśli wyłączysz go, wideo działa na FF. Sprawdź to. –