相关疑难解决方法(0)

我是javascript的新手,并尝试使用Twitter引导程序来获得一个好看的网站并快速运行.我知道这与jquery有关,但是当我按下关闭按钮或关闭图标时,我不确定如何停止我的视频.

有人可以解释我如何让我的视频停止播放,因为即使我关闭窗口,我仍然可以在后台听到它.

<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a>

<!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria>×</button>
      <h3 id="myModalLabel">I am the header</h3>
    </div>
    <div class="modal-body">
      <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>

我正在创建一个带有bootstrap的网站,可以在这里找到 - http://www.branchingouteurope.com/digital-spark-testing/

如果选择视频图像,您将看到一个模态窗口,打开一个YouTube视频.我遇到的问题是当模态窗口关闭时,视频会继续播放.我希望在模态窗口关闭时停止播放此视频.

我看过网上看了很多解决方案,但似乎都没有.这是标记......

<span class="main_video">
<div data-toggle="modal" data-target="#myModal" style="cursor:pointer">
<img src="img/master/video.fw.png" height="81%" width="60%" alt="Digital Spark Video"/>
</div>
</span>

<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  </div>
  <div class="modal-body">
  <iframe width="100%" height="100%" src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

`

我知道有类似的问题,但我还没有完全开始工作.

此代码显示的是iframe内的YouTube视频.单击按钮(emsbinstartbutton)时,视频将被隐藏并替换为占位符.如果此占位符(threebytwo)已关闭,则视频应再次显示.

此时此功能正常,但视频隐藏时会继续播放(您可以听到音频,当您返回时可以看到它仍在播放).隐藏时应停止视频.

 <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Widget.Master" Inherits="System.Web.Mvc.ViewPage<WidgetView>" %>

<%@ Import Namespace="WidgetData" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <%= Html.WidgetTitle(Model) %>
</asp:Content>
<asp:Content ID="WidgetStyle" ContentPlaceHolderID="StyleContent" runat="server">
    <%= Html.WidgetStyle(Model) %>
    <%= Html.WidgetScripts(Model) %>
    <script type="text/javascript">

        // when they click on the buy now button we will hide the title and show the widget
        //detach work to stop vid but can t get it back.....
        $(document).ready(function () {
            $("#emsbinstartbutton").click(function () {
               $("#divbuyonlineVid").hide();
                $(".divbuyonlineVid").hide();
                $("#threebytwo").show();
            });
        });


        // when they click on …

在此处给出的示例中,https://developers.google.com/youtube/iframe_api_reference可以看到,不是使用标准的css选择器语法,而是一个自定义字符串语法,似乎只引用了id.

<div id="player"></div>

// note no 'var' and yet this will work in strict mode
// since 'player' is being implicitly grabbed from the dom
player = new YT.Player('player', ...);

这当然会产生泄漏全局变量的问题,无论id是什么名称,这是我试图避免的事情(因为它为严格模式创造了一个漏洞,只是令人困惑和意外的行为).

解决方法是对名称进行连字,以便无法从全局空间访问该名称

<div id="js-player"></div>

// now window['js-player'] is guarded from accidental access
var player = new YT.Player('js-player', ...);

但最重要的是,使用ID只是不好的做法,我更喜欢完全避免它们,因为类很好地工作并且没有奇怪的副作用.