Question

我正在创建一个使用video.js播放视频的rails应用程序。我还使用其他三个脚本来自定义页面上的播放器和活动。我的javascript导入按此顺序排序：

= javascript_include_tag "video.js"
= javascript_include_tag "videojs-youtube.js", :defer => "defer"
= javascript_include_tag "videojs-overlay.js", :defer => "defer"
= javascript_include_tag "commentFeed.js", :defer => "defer"

我的问题是我第一次导航到某个页面时没有加载VideoJS。因此，依赖于video.js脚本的三个附加脚本会抛出一堆错误。直到硬盘刷新，一切都开始正常工作。

知道为什么会这样吗？我试图推迟后三个脚本，直到video.js加载，但它似乎没有帮助。

如何在加载videojs之后确保脚本按顺序运行？

Answer 1

我遇到过这个问题，我用它来使videojs工作。

change = ->
        for player in document.getElementsByClassName 'video-js'
            video = videojs(player)


    before_load = ->
        for player in document.getElementsByClassName 'video-js'
            video = videojs(player)
            video.dispose()


    $(document).on('turbolinks:load', change)
    $(document).on('turbolinks:before-visit', before_load)

Answer 2

更新：事实证明问题与Rails如何使用Turbolinks处理视图更改有关。

我的videojs对象没有被破坏，因为它应该在预期时未被调用$(document).ready(...)，因此在没有重新加载的情况下在另一个页面上不可用。

为了解决这个问题，我使用了andrkrn中的以下代码来监听turbolinks加载事件并做出相应的响应。以下是我为使用Rails 5所做的更改：

change = ->
    for player in document.getElementsByClassName 'video-js'
        video = videojs('video_player')
        console.log("Change, assigning video")

before_load = ->
    for player in document.getElementsByClassName 'video-js'
        video = videojs('video_player')
        video.dispose()
        console.log("before_load, disposing of video")

$(document).on('turbolinks:load', change)
$(document).on('turbolinks:before-visit', before_load)

Javascript：Video.js直到硬刷新才加载

2 个答案: