如何修复在某些浏览器上停止工作的背景视频

问题描述 投票：0回答：2

好吧，这就是发生的事情。

我的背景视频之前适用于所有浏览器。然后今天早上突然它在某些浏览器上停止工作。视频不再播放或立即冻结

我清除了缓存，什么也没有。然后我尝试恢复更改，但什么也没有。我也尝试从头开始写一遍，但什么也没有。

我尝试的最后一件事是添加此脚本代码：

<script> $(document).ready(function() { var vid = document.getElementById("bgvid"); vid.play(); }); </script>

网站是www.medshopandbeyond.com。

背景视频不适用于 chrome、opera、safari。它有时会在 Firefox 上加载，并且总是在 Internet Explorer 上播放。

我该如何解决这个问题？非常感谢您的帮助

视频和内容的 HTML 标记：

 {% 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">
	<table>
      <tr><td width="50%"></td><td width="50%" class="headline_content">
				<h1>Beyond Limitations</h1>
				<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>
			</td></tr>
      <tr><td width="50%"></td><td width="50%" class="tb_action">
				<a href="http://www.medshopandbeyond.com/collections/all" class="btn_action_22">
					<span>Start Shopping</span>
					<i class="ico_arrow"></i>
				</a>
			</td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr></tr>
	</table>
</div>
      </div>

视频的CSS：

div.video-background {
    height: 58em;
    left: 0;
    overflow: hidden;
    /*position: fixed;
    top: 96px;*/
    vertical-align: top;
    width: 100%;
    /*z-index: -1; */
	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：

/************* 
Call to Action Button - Style 22
 ******************/
.btn_action_22 {
	background: #00559f !important;  /* Change button background color */
	border: 1px solid #00559f !important; /* Change button border color */
	color: #fff !important; /* Change button text color */
	line-height: 1.2;
	font-size: 30px;
	display: inline-block;
	padding: 22px 45px 23px;
	position: absolute;
	text-decoration: none;
	text-transform: uppercase;
	z-index: 3;
	white-space: nowrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
    font-family: Lato;
    font-weight: 100;

}
.btn_action_22 span {
	left: 12px;
	position: relative;
	-o-transition: all .4s;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
	transition: all .4s;
}
.btn_action_22 .ico_arrow {
	background: url(ico_arrow_w.png) 0 center no-repeat; 
	display: inline-block;
	height: 16px;
	width: 18px;
	position: relative;
	left: 0;
	top: 0px;
	opacity: 0;
	filter: alpha(opacity=0);
	-o-transition: all .4s;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
	transition: all .4s;
}
.btn_action_22:hover {
	background: #69d617 !important; /* Change button background color when mouse over */
	color: #000 !important; /* Change button text color when mouse over */
    border:1px solid #69d617 !important;
}
.btn_action_22:hover span {
	left: -12px;
}
.btn_action_22:hover .ico_arrow {
	opacity: 1;
	filter: alpha(opacity=100);
	left: 12px;
}
/**************  Headline Item *************/
.headline_22 {
	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;*/
	color: #000 !important; /* Change headline background color */ 
    display:inline-block;
}
.headline_22 h1 {
	color: #000 !important; /* Change headline title text color */
	font-size: 52px;
	line-height: 1.2;
	text-transform: uppercase;
	font-weight: 100;
    font-family: Lato;
	padding: 0;
	margin: -1px 0 9px;
    background-color:#fff;
    opacity:0.5;
}

.headline_22 p {
	line-height: 1.4;
	font-size: 39px;
	margin: 0 0 10px;
	padding: -10px;
    font-family: Lato;
    font-weight: 100;
    word-spacing: -1px;
    background-color:#fff;
    opacity:0.5;
}
.headline_22 table {
	border-spacing: 0;
	width: 100%;
    
}
.headline_22 td {
	vertical-align: top;
	padding: 25px;
}
.headline_22 .headline_content {
	padding: 20px 25px 9px;
	text-align: justify;
}
@media (max-width: 979px) {
	.headline_22 .headline_content {
		text-align: center;
        
	}
	.headline_22 td {
		display: block;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
        
	}
	.btn_action_22 {
		text-align: center;
		width: 100%;
        margin-left: -2px;
        
	}
}
@media (max-width: 479px) {
	.btn_action_22 {
		padding: 18px 30px;
        margin-left: -2px;
        
	}
}

javascript html css video background
2个回答
1
投票

您必须添加不同的视频格式，因此请尝试转换它们，然后像这样添加它们，以便每个浏览器使用相应的视频格式。

<video controls="controls" poster="linktoposter.jpg" width="640" height="360">
 <source src="linktomovie.mp4" type="video/mp4" />
 <source src="linktomovie.webm" type="video/webm" />
 <source src="linktomovie.ogv" type="video/ogg" />
 <!-- Fallback object using Flow Player -->
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
 <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
 <param name="allowFullScreen" value="true" />
 <param name="wmode" value="transparent" />
 <param name="flashVars" value="config={'playlist':[ 'linktoposter.jpg',{'url':'linktomovie.mp4','autoPlay':false}]}" />
 <img alt="My Movie" src="linktoposter.jpg" width="640" height="360" title="No video playback capabilities, please download the video below." />
 </object>
 <!-- Fallback Text -->
 Your browser does not appear to support a browser. Please download the video below.
</video>

如果您想制作跨浏览器的全宽背景视频，请使用此。

http://www.kevinfremon.com/fullscreen-background-video-using-html5-and-css/

0
投票

我必须添加一些参数才能使其工作。添加更多格式并没有完成这项工作。

<video class="bg-video"  onloadedmetadata="this.muted=true"  playsInline preload autoplay loop muted>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.