切换到不同的引导选项卡后，javascript vlc函数不调用_Javascript_Jquery_Twitter Bootstrap_Tabs_Vlc

切换到不同的引导选项卡后，javascript vlc函数不调用

javascript jquery twitter-bootstrap tabs

切换到不同的引导选项卡后，javascript vlc函数不调用,javascript,jquery,twitter-bootstrap,tabs,vlc,Javascript,Jquery,Twitter Bootstrap,Tabs,Vlc,我正在尝试将vlc插件嵌入引导选项卡。在切换不同的引导选项卡之后我正在尝试调用vlc javascript函数。但是当我试图调用函数时，它是混乱的这是我的密码：- <!DOCTYPE html> <html> <head> <title>Video panel</title> <meta name="viewport" content="width=device-width, initial-scale=1">

我正在尝试将vlc插件嵌入引导选项卡。在切换不同的引导选项卡之后我正在尝试调用vlc javascript函数。但是当我试图调用函数时，它是混乱的

这是我的密码：-

<!DOCTYPE html>
<html>
<head>
  <title>Video panel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="UTF-8">
</head>

<body onload="mainplay()">
    <div class="container">
        <ul id="myTab" class="nav nav-tabs">
            <h1>Video panel</h1>
            <li class="active"><a href="#home" data-toggle="tab" id="hometab">Home</a></li>
            <li class=""><a href="#profile" data-toggle="tab" id="profiletab">Profile</a></li>
            <li class=""><a href="#timeline" data-toggle="tab" id="timetab">Timeline</a></li>
        </ul>
        <div id="myTabContent" class="tab-content"> <br/> <br/>
            <div class="tab-pane fade active in" id="home">
                <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
                    version="VideoLAN.VLCPlugin.2"
                    width="640"
                    height="480"
                    id="vlcmain"
                    autoplay="true"
                    windowless="false"
                    toolbar="true"
                    text="waiting for video">
                </embed>
            </div>
            <div class="tab-pane fade" id="profile">
                <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
                    version="VideoLAN.VLCPlugin.2"
                    width="640"
                    height="480"
                    id="vlcsub"
                    autoplay="true"
                    windowless="false"
                    toolbar="true"
                    text="waiting for video">
            </embed>
            </div>
            <div class="tab-pane fade" id="timeline">
                <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
                    version="VideoLAN.VLCPlugin.2"
                    width="640"
                    height="480"
                    id="vlcdelayed"
                    autoplay="true"
                    windowless="false"
                    toolbar="true"
                    text="waiting for video">
                </embed>
            </div>
        </div>

        <script>
            function mainplay(){
                var vlcmain= document.getElementById('vlcmain');
                var vlcsub= document.getElementById('vlcsub');
                var vlcdelayed= document.getElementById('vlcdelayed');

                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                        var target = $(e.target).attr("href");

                    if(target=='#home'){
                        if(vlcmain){
                            vlcsub.playlist.stop();
                            alert(vlcsub.input.state);

                            vlcdelayed.playlist.stop();
                            alert(vlcdelayed.input.state);

                            vlcmain.playlist.add('http://127.0.0.1/vlctest/lua.mp4');
                            vlcmain.playlist.play();
                        }
                    }

                    if(target=='#profile'){
                        if(vlcsub){

                            vlcsub.playlist.add('http://127.0.0.1/vlctest/video1.mp4');
                            vlcsub.playlist.play();
                        } 
                    }

                    if(target=='#timeline'){
                        if(vlcdelayed){

                            vlcdelayed.playlist.add('http://127.0.0.1/vlctest/lua.mp4');
                            vlcdelayed.playlist.play();
                        } 
                    }
                });
            }
        </script>
    </div>
</body>
</html>


视频面板

视频面板







函数mainplay（）{
var vlcmain=document.getElementById（'vlcmain'）；
var vlcsub=document.getElementById（'vlcsub'）；
var vlcdelayed=document.getElementById（'vlcdelayed'）；
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
var target=$（e.target）.attr（“href”）；
如果（目标=“#主页”）{
if（vlcmain）{
vlcsub.playlist.stop（）；
警报（vlcsub.input.state）；
vlcdelayed.playlist.stop（）；
警报（vlcdelayed.input.state）；
vlcmain.playlist.add（'http://127.0.0.1/vlctest/lua.mp4');
vlcmain.playlist.play（）；
}
}
如果（目标=='#配置文件'）{
if（vlcsub）{
vlcsub.playlist.add（'http://127.0.0.1/vlctest/video1.mp4');
vlcsub.playlist.play（）；
} 
}
如果（目标=“#时间线”）{
if（VLC延迟）{
vlcdelayed.playlist.add（'http://127.0.0.1/vlctest/lua.mp4');
vlcdelayed.playlist.play（）；
} 
}
});
}

所以基本上我的要求是：-

有3个选项卡

home、profile、timeline

，在这三个选项卡中，我嵌入了三个具有不同ID的VLC web插件

我想要的功能是这样的当我播放

home

tab视频时，在播放

home

tab视频之前，剩余的tabs视频

profile，timeline

必须关闭在

停止状态下

像这样，只有当我播放

配置文件

选项卡视频时，剩余的选项卡

主页，时间线

视频必须进入

停止状态

同样的情况也会出现在

时间线

选项卡上

现在（我不知道在多大程度上这是正确的方法）当我点击

profile

选项卡并返回

home

选项卡时，它能够停止

profile

tab video并启动

home

tab video，但对于

timeline

tab video，它给出了错误

我尝试了不同的方法来实现这一点，但并没有达到预期的效果

请任何人在这方面帮助我，并建议我怎么做

感谢您的建议。

可能是因为其他选项卡有显示：none属性您可以制作小提琴吗？不可能嵌入vlc插件..只需尝试为所有选项卡提供活动类/或显示块属性，并在单击选项卡btn后告知它是否工作？不，它不工作..您可以共享链接吗？