JQuery在点击显示时自动播放视频答案

【问题标题】：JQuery autoplay video on click showJQuery在点击显示时自动播放视频
【发布时间】：2011-07-04 17:11:52
【问题描述】：

我在导航面板上使用 JQuery，该面板作为单击显示/隐藏操作。在“关于”面板上是小的 html5 视频，我想在点击显示时自动启动并在点击隐藏时停止视频。 “关于”面板的 id 是：

<div class="panel2">

面板功能示例代码：

$(document).ready(function(){
$(".triggerso").click(function(){
    $(this).hide();
    $(".panelso").show("fast");
    $('.panelso').click(function(){ 
    $(this).hide();
    $('.triggerso').show("fast"); });
    $(".panel").hide("slow");
    $(".panel1").hide("slow");
    $(".panel2").hide("slow");
    $(".panel3").hide("slow");
    return false;
});
});

非常感谢您的帮助。

安德烈亚

【问题讨论】：

标签： jquery html5-video

【解决方案1】：

看这个：
http://www.w3.org/TR/html5/video.html#video

以及控件属性：
http://www.w3.org/TR/html5/video.html#attr-media-controls

可能媒体方法“.play()”和“.pause()”会帮助你

类似这样的：

var video = $("#myvideo")[0]; // id or class of your <video> tag
if (video.paused) {
    video.play();
}

“[0]”是获取html元素而不是jQuery对象。

【讨论】：

我确实尝试了视频标签内的“自动播放”，但视频在整个页面加载时开始播放 - 而不是在点击 panel2 时。我只需要在 panel2 内指定自动播放，并在面板关闭或隐藏时停止或暂停 panel2 中的视频。我不知道足够的 JQuery 知道如何合并“.play()”和“.pause()”以仅在 panel2 中实现此功能。非常感谢您的回复。
我用一个例子编辑了答案。 play() 和 pause() 是视频 DOM 元素的方法。
快到了。电影自动在单击打开时开始，但当您单击关闭面板时，电影会继续播放。我将代码放在 "$(".trigger2").click(function(){$(".panel2").toggle("slow"); 行下面。感谢您与我合作。
最终代码：$(document).ready(function(){ $(".trigger2").click(function(){ $(".panel2").toggle("slow") ; $('#aboutvid').get(0).play(); $(".panel3").hide("slow"); $('.triggerso').show("fast"); $( ".panelso").hide("fast"); $(".panel").hide("slow"); $(".panel1").hide("slow"); $(".trigger2") .click(function(){ $(".panel2").hide; $('#aboutvid').get(0).pause(); return false; }); }); });