背景视频不会在现场播放，仅在本地播放
更新：在我在浏览器中预览我的作品时在本地。我的文件存储在我们的某个服务器上的相同文件夹结构中。
更新：你指的是哪个jpeg引用？这是在我尝试这样做之前吗？
更新：此页面未加载评论或答案，因此我将在此处发布我的答案。
更新：控制台确实说文件丢失了，但它们不是。整个站点文件已上载多次。如果需要，我可以提供服务器内的文件夹的屏幕截图。
我在索引页面中插入了一个背景视频，但一旦网站上线，它就无法播放。我相信它使用图像后备。它在本地工作正常，但有绝对网址的问题。我从github下载了这个，这个问题的更新如下，但我下载的软件包仍然是一个新版本。测试链接位于github链接下方。
https://github.com/VodkaBears/Vide/archive/0.1.1.zip#
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Pragma" content="no_cache" />
<title>M&T Printing Group</title>
<link rel=”author” href=”https://plus.google.com/+MTPrintingGroupKitchener“/>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/content.css" />
<link rel="stylesheet" type="text/css" href="css/font.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/default.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/component.css" />
<script src="QuotesRotator/js/modernizr.custom.js" type="text/javascript"></script>
<!-- github.com/scottjehl/Respond - for IE 8, 7.... -->
<script src="Respond-master/dest/respond.min.js" type="text/javascript"></script>
<!--<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".subnav").prev().mouseover(function(){
var sub_menu_shift = parseInt($(this).next().css("height")) + 100;
$(this).next().css({'position':'relative','bottom':sub_menu_shift});
});
});
</script>-->
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="Vide-0.1.2/examples/video/videoMain">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>window.jQuery || document.write('<script src="Vide-0.1.2/libs/jquery/jquery-1.11.1.min.js"><\/script>')</script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>
// $(document).ready(function () {
// $(document.body).vide("Vide-0.1.2/examples/video/videoMain"); // Non declarative initialization
//
// var instance = $(document.body).data("vide"); // Get instance
// var video = instance.getVideoObject(); // Get video object
// instance.destroy(); // Destroy instance
// });
</script>
<div id="indexBG">
<div id="colour-bar-black"></div> <!-- colour-bar-black -->
<div id="nav-wrap">
<ul>
<li id="link-one" class="orange">
<a href="printing.html" class="parent-one-link" title="Printing"><span>Printing</span></a>
<div class="subnav" id="subnav">
<ul>
<li><a href="_printing/digital-printing.html" title="Digital Printing">Digital Printing</a></li>
<li><a href="_printing/offset-printing.html" title="Offset Printing">Offset Printing</a></li>
<li><a href="_printing/business-cards&stationery.html" title="Business Cards & Stationery">Business Cards & Stationery</a></li>
<li><a href="_printing/manuals-reports&catalogues.html" title="Manuals, Reports & Catalogues">Manuals, Reports & Catalogues</a></li>
<li><a href="_printing/bindery-services.html" title="Bindery Services">Bindery Services</a></li>
<li><a href="_printing/canada-post.html" title="Canada Post">Canada Post</a></li>
<li><a href="_printing/graphic-design-typesetting.html" title="Graphic Design & Typesetting">Graphic Design & Typesetting</a></li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="red"><a href="promotional-products.html" title="Promotional Products"><span class="doubleLine">Promotional Products</span></a>
<div class="subnav">
<ul>
<li><a href="_promotional-products/awards-mounting.html" title="Awards & Mounting">Awards & Mounting</a></li>
<li><a href="_promotional-products/binders.html" title="Binders">Binders</a></li>
<li><a href="_promotional-products/clothing-apparel.html" title="Clothing & Apparel">Clothing & Apparel</a></li>
<li><a href="_promotional-products/bags.html" title="Bags">Bags</a></li>
<li><a href="_promotional-products/drinkware.html" title="Drinkware">Drinkware</a></li>
<li><a href="_promotional-products/lanyards.html" title="Lanyards">Lanyards</a></li>
<li><a href="_promotional-products/magnets.html" title="Magnets">Magnets</a></li>
<li><a href="_promotional-products/pens-writing-instruments.html" title="Pens & Writing Instruments">Pens & Writing Instruments</a></li>
<li><a href="_promotional-products/presentation-folders.html" title="Presentation Folders">Presentation Folders</a></li>
<li><a href="_promotional-products/usb.html" title="USB Flash Drives">USB Flash Drives</a></li>
<li><a href="_promotional-products/umbrellas.html" title="Umbrellas">Umbrellas</a></li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="pink"><a href="banners-signage.html" title="Banners & Signage"><span class="doubleLine">Banners & Signage</span></a>
<div class="subnav">
<ul>
<li><a href="_banners-signage/drafting-cad-services.html" title="Drafting & CAD services">Drafting & CAD services</a></li>
<li><a href="_banners-signage/coroplast&foamcore.html" title="Coroplast & FoamCore">Coroplast & FoamCore</a></li>
<li><a href="_banners-signage/retractable-banners.html" title="Retractable Banners">Retractable Banners</a></li>
<li><a href="_banners-signage/posters&banners.html" title="Posters & Banners">Posters & Banners</a></li>
<li><a href="_banners-signage/wraps&pvc.html" title="Wraps & PVC">Wraps & PVC</a></li>
<li><a href="_banners-signage/displays&canvas.html" title="Displays & Canvas">Displays & Canvas</a></li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="purple"><a href="pool.html" title="POOL"><span>POOL</span></a></li>
<li class="blue"><a href="http://www.volumesdirect.com/" title="Volumes"><span>Volumes</span></a></li>
<li class="green"><a href="contact.html" title="Contact"><span>Contact</span></a>
<div class="subnav">
<ul>
<li><a href="locations.html" title="Locations">Locations</a></li>
<li><a href="media.html" title="Media">Media</a></li>
<li><a href="https://digitalink2.mtprint.com/exchweb/bin/auth/owalogon.asp?url=https://digitalink2.mtprint.com/exchange&reason=0&replaceCurrent=1" title="Digital Link">Digital Link</a></li>
<li><a href="ftp://ftp.mtprint.com/" title="FTP site">FTP site</a></li>
<li><a href="https://secure.mtprint.com/pool/CustSignIn.aspx" title="Client Login">Client Login</a></li>
<li><a href="mtprint/QuoteForm.aspx" title="Estimate Request">Estimate Request</a></li>
<li><a href="submit/submit_file.aspx" title="Submit A File">Submit A File</a></li>
<li><a href="_contact/recognition.html" title="Recognition">Recognition</a></li>
<li><a href="_contact/graphics-factory.html" title="Graphics Factory">Graphics Factory</a></li>
<li><a href="_contact/careers.html" title="Careers">Careers</a></li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="yellow-facebook"><a href="https://www.facebook.com/mtprint/" title="Facebook"><span></span></a></li>
</ul>
</div> <!-- nav-wrap -->
<div id="logo"><a href="index.html"><img src="images/logo-main.png" alt="M&T Printing Group" title="M&T Printing Group" /></a></div> <!-- logo -->
<!-- used for mobile -->
<div id="logo-mobile"><a href="index.html"><img src="images/M&T-Printing-Group-Logo-moble.jpg" alt="M&T Printing Group" title="M&T Printing Group" /></a></div> <!-- logo-mobile -->
<h1>“Your Partners In Print”</h1>
<div id="footer">
<ul class="footer-left">
<li><a href="index.html">M&T Printing Group</a> - © 2014</li>
</ul>
<ul class="footer-right">
<li><a href="https://secure.mtprint.com/pool/CustSignIn.aspx" title="Client Login">Client Login</a></li>
<li><a href="locations.html" title="Locations">Locations</a></li>
<li><a href="pool.html" title="Pool">Pool</a></li>
</ul>
</div> <!-- footer -->
</div> <!-- indexBG -->
</body>
</html>
1 个答案:
答案 0 :(得分：0)
我会使用jquery做这样的事情。您可以将videoURL转到任何您喜欢的地方，它会立即加载。我过去已经为几个网站做过这个，它的工作非常好。以下只是html和JQUERY。在我看来你的问题似乎是你存储了视频。你说它工作得很好“本地”你在哪里托管你的网页？您的视频应存储在同一地点。
<section class="content-section video-section">
<div class="pattern-overlay">
<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=sd4bqmP_460',containment:'', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
</div>
</section>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
我看到你添加的编辑。删除jpeg或引用mp4文件。
- 很抱歉编辑你的评论，但这是我能回应的唯一方式。你的意思是jpeg参考吗？
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？