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

Question

我正在创建一个使用 video.js 播放视频的 rails 应用程序。我还使用其他三个脚本来自定义播放器和页面上的 activity。我的 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

Update：原来问题与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)

Answer 2

我遇到过这个问题，我用它来使 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)

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

Javascript: Video.js not loading until hard refresh

html

javascript

video.js