Question

我有一个功能，当我点击视频缩略图时播放视频。我试图显示/隐藏通过php动态生成的视频描述，但它似乎不起作用。

设置：使用jwplayer7的wordpres cms。

这是调用js函数的html

<div class="s_l_whole_item" title="sample.mp4" onclick="playVOD(this.id)" id="sample.mp4"> video image here </div>

所有javascript都在外部文件中，这是播放视频的功能，应该显示/隐藏（尚未实现，但即使隐藏也不起作用）动态为每个视频创建的div < / p>

function playVOD(filename) {
    jwplayer('MediaPlayerOverview_LS_dvr')
            .setup(
                    {
                        sources : [
                                {
                                    file : "rtmp://xx.xxx.xxx.xxx:1935/vod/mp4:"+ filename
                                },
                                {
                                    file : "http://xx.xxx.xxx.xxx:1935/vod/mp4:"
                                            + filename + "/playlist.m3u8"
                                } ],
                        rtmp : {
                            bufferlength : 3,
                        },
                        logo : {
                            file : 'http://www.somepicture.nu/a.jpg',
                            link : 'http://www.link.nu/'
                        },
                        abouttext : "right click text",
                        aboutlink : "http://www.right click link.com",
                        autostart : true,
                        title : 'title',
                        width : '100%',
                        height : "100%",
                        aspectratio : '16:9',
                        skin : 'glow',
                        fallback : true,
                        androidhls : true,

                    })

        jQuery(document).ready(function() {

            jQuery('.s_l_whole_item').live('click', function(event) {
                //jQuery(this).closest('.hiden_karuselis').find('#ka_'+filename).toggle();

                jQuery(this).closest('.hiden_karuselis').find('#ka_'+filename).hide();

                 console.log("I have been clicked!");
                 console.log('#ka_'+filename);

            });
        });

}

视频播放适用于每次不同的点击，它会播放我点击的视频，但由于某种原因它不显示/隐藏div。

这是我试图隐藏/显示的div，具体取决于所点击的视频。出于演示目的，我们可以说它只是＆＃34; sample.mp4＆＃34;

<div class="hiden_karuselis">
 <div class="ka_file" id="ka_sample.mp4">
  <div class="ka_file_name">sample</div>
  <div class="ka_file_description">description of file</div>
  <div class="ka_file_date">2016-04-19 10:19:33</div>
 </div>
</div>

尝试失败后，我注意到chrome控制台输出变量，好像该函数将自动附加到以前的所有调用。这是我在3个不同视频中点击3次时在控制台中看到的内容。

vod_player.js?ver=4.4.3:77 I have been clicked!
vod_player.js?ver=4.4.3:78 #ka_sample.mp4
vod_player.js?ver=4.4.3:77 I have been clicked!
vod_player.js?ver=4.4.3:78 #ka_sample.mp4
vod_player.js?ver=4.4.3:77 I have been clicked!
vod_player.js?ver=4.4.3:78 #ka_myStream.mp4
VM9740:13 Unhandled event from "MediaPlayerOverview_LS_dvr_swf_0": state %7B%22newstate%22%3A%22idle%22%2C%22oldstate%22%3A%22playing%22%2C%22type%22%3A%22state%22%7D
vod_player.js?ver=4.4.3:77 I have been clicked!
vod_player.js?ver=4.4.3:78 #ka_sample.mp4
vod_player.js?ver=4.4.3:77 I have been clicked!
vod_player.js?ver=4.4.3:78 #ka_myStream.mp4
vod_player.js?ver=4.4.3:77 I have been clicked!
vod_player.js?ver=4.4.3:78 #ka_rtgwait.mp4
VM9823:13 Unhandled event from "MediaPlayerOverview_LS_dvr_swf_1": state %7B%22newstate%22%3A%22idle%22%2C%22oldstate%22%3A%22playing%22%2C%22type%22%3A%22state%22%7D

在上面的日志中，我点击了＆＃34; sample.mp4＆＃34;那么＆＃34; mystream.mp4＆＃34;并且最后在＆＃34; rtgwait.mp4＆＃34;

为什么.hide（）不起作用，为什么日志中存在堆叠变量？如果我每次点击按钮/通话功能都不清除它们吗？我假设这也是jwplayer7错误原因以及为什么.hide（）不起作用。

我该如何解决这个问题？

Answer 1

console.log(filename);正在向控制台写#ka_sample.mp4，建议变量＆＃39; filename＆＃39;正确设置。

然后您使用文件名变量('#ka_'+filename)，它将查找ID为＃ka_#ka_sample.mp4的元素，该元素不存在。

我删除了'#ka_'位，因此您应该：

jQuery(this).closest('.hiden_karuselis').find(filename).hide()

Answer 2

我发现了问题，这是额外的＆＃34;。＆＃34;在我的班级名称/ ID中，因为我的ID是＆＃34; filename.mp4＆＃34;。为了解决这个问题，我必须改变我的ID生成方式并省略＆＃34; .mp4＆＃34;一部分。

我还找到了一个只显示点击信息的解决方案。

jQuery(document).ready(function() {
        jQuery('.s_l_whole_item').live('click', function(event) {
            jQuery('#hiden_karuselis > div').show()
            jQuery('#hiden_karuselis > div').not('#'+filename).hide()
        });
    });

现在我有另一个问题。因为我有像

这样的文件名

 myStream-2015-08-10-08.51.50.076-CEST-0.mp4

由wowza媒体服务器生成。有没有办法通过＆＃34;。＆＃34;作为class / id名称的一部分，而不是混淆css选择器？

传递变量的js函数堆栈.hide（）无效

2 个答案: