jquery发现找不到音频和视频标签暂停和播放音频

时间:2014-06-11 13:30:48

标签: jquery

如果活动幻灯片中有任何音频或视频标签,则使用属性选择器查找活动幻灯片并暂停。但似乎我做错了。谁能帮我吗。 控制台显示此错误s.find is not a function

以下是代码。

jQuery("#Pause").bind('click', function()
{
     var s = jQuery("section[aria-selected=true]");
     var video   =   s.find("video");
     var audio   =   s.find("audio");

     if (video.length)
     {
          video.pause();
     }

     if (audio.length)
     {
          audio.pause();
     }
});

以下是HTML代码

    <a href="javascript:void(0);" id="Pause">Pause</a>
<a href="javascript:void(0);" id="Play">Play</a>

<section aria-selected="true">
    <h1>My Presentation</h1>
    <footer>by John Doe</footer>
</section>

<section>
        <audio controls>
            <source src="traffic.ogg" type="audio/ogg" />
            <source src="traffic.mp3" type="audio/mpeg" />
        </audio>
</section>

<section>
    <h3>An incremental list</h3>
    <ul class="incremental">
      <li>Item 1
      <li>Item 2
      <li>Item 3
        <ul class="incremental">
          <li> Item 3.1
          <li> Item 3.2
        </ul>
    </ul>
    <div role="note">Some notes. They are only visible using onstage shell.</div>
</section>

<section>
  <blockquote>
    Who's brave enough to fly into something we all keep calling a death sphere?
  </blockquote>
  <details>
    <p>In the onstage shell, notes scroll rather than overflow:</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac dui eu est feugiat lacinia sit amet nec leo. Mauris eu ipsum leo. Nulla mi odio, cursus sed sollicitudin non, fringilla id magna. Suspendisse sit amet posuere elit. Maecenas iaculis, turpis a placerat imperdiet, libero lorem feugiat nisi, nec tincidunt diam nibh sit amet massa. Vestibulum quis adipiscing tellus. Maecenas sollicitudin sodales pulvinar. Donec dui ipsum, bibendum facilisis consequat interdum, tempus ut mauris. Aliquam ut dolor nec odio scelerisque bibendum quis in neque. Aliquam dui dui, pulvinar quis fermentum quis, gravida eu augue. Nunc tristique dolor a urna pulvinar bibendum. Curabitur mollis cursus neque, in scelerisque metus porta non. Donec tempor enim in nibh vestibulum et convallis nisi malesuada. Duis ut lectus sed metus venenatis porttitor id pharetra quam. Suspendisse sapien turpis, ornare in molestie et, gravida eget turpis.
    </p>
  </details>
</section>

1 个答案:

答案 0 :(得分:1)

文档准备好后,您没有执行此代码。如果在文档准备就绪时运行,您的代码就可以很好地找到音频和视频标签。

如果你的代码没有在元素出现在文档之前执行,那么s将返回一个jQuery实例,但是没有任何元素,这可能是为什么find()不可用的原因。

创建了一个演示,以便修复我在第一次评论时尝试调用pause()时引用的jquery实例问题,更新HTML以便所选的一个有一个音频文件并添加一个正确的文件流以便播放并且可以测试从您的自定义按钮暂停。

http://jsfiddle.net/u9E3N/2/

在jQuery中,您可以在文档准备就绪时执行代码

$(document).ready(function() {
  // code goes here
});

或简称

$(function() {
  // code goes here
});