使用隐藏div的jquery查找最近的视频标签id

时间:2013-08-27 12:43:51

标签: javascript jquery html css

我当前的项目中有一个HTML5视频。我使用了视频js插件。现在我想在单击播放按钮时增加(不是全屏)视频大小。

HTML

<video id="big-72_html5_api" class="vjs-tech" data-setup="{ "controls": true,"autoplay": false, "loop": false, "preload": "true" }" preload="true">
<div></div>
<div class="vjs-poster" tabindex="-1" style="display: none;"></div>
<div class="vjs-text-track-display"></div>
<div class="vjs-loading-spinner" style="display: none;"></div>
<div class="vjs-big-play-button" aria-live="polite" tabindex="0" aria-label="play video">
<div class="vjs-control-bar">

我已添加<div class="vjs-big-play-button"中的点击事件,以查找上方视频代码<video id="big-72_html5_api"的ID,请参阅下面的

Jquery的

    $("#user-table").on('click','.vjs-big-play-button', function() {
    var closest_video_id = $(this).closest( "video" ).find(".vjs-tech").attr( "id" );
    alert(closest_video_id);
});

单击时播放按钮进入隐藏模式。见下文

点击播放按钮时

<div class="vjs-big-play-button" aria-live="polite" tabindex="0" aria-label="play video" style="display: none;">

点击播放按钮时,我需要帮助才能找到视频标签ID。 抱歉我的英语不好。

1 个答案:

答案 0 :(得分:0)

你的HTML代码不完整吗?视频标记缺少结尾标记</video>

我认为div是视频标记的兄弟,所以你可以使用siblings-selector而不是最近的,它会遍历dom-tree。此外,如果类vjs-tech是视频标记的类,则可能不需要查找部分。如果您有多个视频标签,则需要付费,在这种情况下您可以执行

var closest_video_id = $(this).siblings("video.vjs-tech").attr("id");