Question

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

我通过基本方式在网站上通过SublimeVideo成功使用了15-20个视频，通过在用户点击的页面上显示链接，点击后，视频将在SublimeVideo灯箱中打开然后开始玩。

但是现在，我需要为这些视频创建“更短的网址”，这些网址可以通过印刷出版物和电子邮件发送，并且用户可以访问网站查看，而不仅仅是视频文件。

理想情况下，我希望在单页网址中使用带有主题标签的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

我想我可以简单地为第一个视频制作该网址：

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），我终于能够解决上述详细问题（YAY !!!）。

因此，使用与上面相同的示例，此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>

另请注意：我通过反复试验发现，“＃video =”后面的视频名称必须与“A”标记中的“ID”相同，而不是“视频” “ 标签！所以，你会注意到两者之间的“id =”是（并且需要）不同。 “video”标签中的“id =”与“href =”相同。

SublimeVideo JavaScript

1 个答案: