javascript - SublimeVideo JavaScript

Question

我一直在使用SublimeVideo ，而且我已经为我正在开发的网站做了很多工作。

我已经通过 SublimeVideo 在网站上以基本方式成功使用了 15-20 个视频，方法是在用户点击的页面上添加一个链接，点击后，视频会在 SublimeVideo 灯箱中打开并开始播放。

但现在，我需要为这些视频创建“较短的 URL”，这些视频可以通过打印出版物和电子邮件发送，并将用户带到网站查看，而不仅仅是视频文件。

理想情况下，我希望仅在单页网址中使用 id/data-uid 和主题标签，并让所选视频在灯箱中自动启动和播放。这似乎是不可能的(？)。

我可以选择在单个页面中隐藏视频标签，并让主题标签取消隐藏它并在 URL 中播放它。如果这一切都不能顺利进行，也许我会采用老式方法，为每个视频制作一个页面，然后将其嵌入到页面中。

无论如何，在浏览了所有文档页面、论坛并搜索网络后，我只找到了几个选项 - 这两个选项实际上都不起作用。我将它们粘贴在下面:

首先，这是我用于所有视频的 HTML 示例:

<p class=""><a href="#video1" class="sublime" data-autoresize="fit">video1 text link on page</a></p>

<video id="video1" data-uid="video1" title="video1 description" poster="/assets/images/video1.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
    <source src="/assets/videos/video1.mp4" />
</video>

这本身就非常有效!我不想改变这一点。单击文本链接后，灯箱将打开并且视频可以完美播放。

因此，假设包含 15-20 个视频以及上述代码的页面位于:

http://example.com/resources/index.php

我想我可以简单地为第一个视频创建该 URL:

http://example.com/resources/index.php#video1

...或者更好...

http://example.com/resources#video1

...并对所有其他视频 ID 进行仿效。

为了让它发挥作用，我尝试过:

<script type="text/javascript">
    sublimevideo.ready(function() 
        {
        if (window.location.hash == '#video1') {
                             sublime('video1').play();
        } else 
        if (window.location.hash == '#video2') {
                             sublime('video2').play();
        } else 
        if (window.location.hash == '#video3') {
                             sublime('video3').play();
        }
    });     
</script>

...这不起作用。由于某种原因，它可以与页面上的第一个视频一起使用，但我所说的“工作”是指，它会取消隐藏它并使其可播放，而不是在灯箱中打开并自动播放。

然后我在共享文档区找到了这样的代码:

<script type="text/javascript">

    var hashtag = "#video1";
    var hashtag = "#video2";
    var hashtag = "#video3";

    if (document.location.hash == hashtag) {
      showTheVideo(hashtag);
    }

    function showTheVideo(hashtag) {
    }    
</script>

...但这也不起作用。

懂 JavaScript 的人可以帮我拼出它吗？

Answer 1

我会将解决问题的代码放在这里，希望有一天它能帮助其他人搜索并找到它。

将以下代码放在页面头部的...下方

<script type="text/javascript" src="//cdn.sublimevideo.net/js/UniqueIDprovidedInYourAccountGoesHere.js"></script>

...库(这是 SublimeVideo 在您的帐户区域中为您提供的随机字符/数字 .js)，我终于能够解决上述详细问题(耶!!!)。

因此，使用与上面相同的示例，此 URL 现在可以按照我的需要工作(不仅将您带到资源页面，还可以在其灯箱中启动特定视频)。

http://example.com/resources.php#video=interview2

...并通过输入:

RewriteRule ^resources$ resources.php [L]

...在同一目录中的 .htaccess 文件中，我能够使用户更轻松地使用:

http://example.com/resources#video=interview2

据我了解，下面的 JavaScript 添加会查找哈希，然后查找“video=”，然后获取后面的内容，如果它在“a”标记中找到匹配的“id”，那么它告诉它通过在灯箱中启动该视频来执行 SublimeVideo 的操作。太棒了!

    <script type="text/javascript">

        $(document).ready(function () {

            var lochash    = location.hash.substr(1);
            var mylocation = lochash.substr(lochash.indexOf('video='))
                             .split('&')[0]
                             .split('=')[1];

            sublime.ready(function () {

                var lightbox = sublime.lightbox(mylocation);
                    lightbox.open();
            });
        });
    </script> 

这是 HTML 部分(供引用):

<p class=""><a href="#video2" id="interview2" class="sublime" data-autoresize="fit">video2 text link on page that i left as reference for the user in case they close the video that was launched from the publication</a></p>

<video id="video2" data-uid="video2" title="video2 description" poster="/assets/images/interview2.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
    <source src="/assets/videos/interview2.mp4" />
</video>

另请注意:我通过反复试验发现，URL 中“#video=”后面的视频名称必须与“A”标签中的“ID”相同，而不是“video” “标签!因此，您会注意到两者之间的“id=”(并且需要)不同。 “video”标签中的“id=”与“href=”相同。