6
Được rồi đây là những gì đã xảy ra.Cách sửa video nền ngừng hoạt động trên một số trình duyệt nhất định
Video nền của tôi đã hoạt động trên tất cả các trình duyệt trước đó. Sau đó, đột nhiên sáng nay nó ngừng hoạt động trên một số trình duyệt. Video không còn phát hoặc đóng băng ngay lập tức
Tôi đã xóa bộ nhớ cache của mình và không có gì. Sau đó, tôi đã cố gắng hoàn nguyên những thay đổi và không có gì. Tôi cũng đã thử viết lại từ đầu và không có gì.
Điều cuối cùng tôi đã cố gắng được thêm mã script sau:
<script> $(document).ready(function() { var vid = document.getElementById("bgvid"); vid.play(); }); </script>Trang web này là www.medshopandbeyond.com.
Video nền không hoạt động trên chrome, opera, safari. Nó tải SOMETIMES trên firefox và nó luôn luôn phát trên Internet Explorer.
Làm cách nào để khắc phục sự cố này? giúp đỡ của bạn là thực sự đánh giá cao
HTML Markup Video và Nội dung:
{% 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 của Video:
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 Nội dung:
/*************
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 }
}
Bạn có thể đưa thêm mã có liên quan vào chính câu hỏi đó và không liên kết đến trang web bên ngoài không? Để biết thêm thông tin, hãy xem https://stackoverflow.com/help/mcve –
OK Tôi đã thêm mọi thứ tôi có –
Tệp javascript Limespot hiển thị sự cố trong bảng điều khiển, nếu bạn tắt, video hoạt động trên FF. Kiểm tra xem. –