理解这种模式：videojs("videoPlayer", {}, function(){}

Question

我是最近从星球 Flex/Actionscript 来的难民，我仍在研究基础知识，所以这可能是一个非常简单的问题。我对下面的行感到困惑：

videojs("videoPlayer", {}, function(){}

虽然我用的很成功（下），但我不是很了解。它似乎是在指示全局 videojs 对象使用可选参数（{}）查找 id "videoPlayer" 的实例，然后在该实例上调用匿名函数。

我说得对吗？引起我困惑的是可选参数（ {} ）。我可以用它来传递 src 和 poster 并跳过该函数吗？这种模式有名字吗？它很常见吗？

如果这是重复的，请随意对我大喊大叫...

上下文： 我正在构建一个桌面应用程序，使用 Electron 来托管 Timeline.js，我可以在其中访问和显示本地 .mp4 文件。 Timeline.js 使用 iFrame 作为 "include anything you want" 选项，因此我有一个 "video.html" 文件作为 iFrame 的源。在时间线的 JSON 中，我使用查询字符串将参数传递给 Video.js

的 iFrame

<script>
    function getParamValue(paramName) {
        var url = window.location.search.substring(1); 
        var qArray = url.split('&');
        for (var i = 0; i < qArray.length; i++) {
            var pArr = qArray[i].split('=');
            if (pArr[0] == paramName)
                return pArr[1];
        }
    }

    // grap the video & poster frame refs from url
    var videoSrc = getParamValue('videoSrc');
    videoSrc = "assets/videos/" + videoSrc;

    var poster = getParamValue('poster');
    poster = "assets/images/" + poster;

    videojs("videoPlayer", {}, function(){
           this.src(videoSrc);
           this.poster(poster);
           this.load();
    });

</script>

摘自我的 Timeline.js JSON

"media": {
        "caption": "caption",
        "credit": "",
        "url": "<iframe allowfullscreen 
                        webkitallowfullscreen
                        src='video.html?videoSrc=Z.mp4&poster=W.jpg'
                        width='320' height='240'></iframe>", 
         },

Answer 1

这一切都取决于 videojs 的实现。

second {} parameter 是一个 'empty object'，但如果需要，您可以传入额外的参数。

third parameter（你有匿名函数的地方）是在 videojs 加载和初始化后运行的一个函数。

这一切都在视频 js 文档中进行了解释，但由于您是 javascript 新手，我很宽容，因为 'an empty object {}' 对您来说可能是新概念，事实上 javascript 文件需要时间来异步加载，当然它们的代码也需要时间来初始化，因此在优秀的 3rd 方库中通过传入函数来实现 'run this code when initialised' 行为是很常见的。

所以，是的，这是用于初始化第 3 方 javascript 库的相当常见的实现 'pattern'，但我认为它没有特定的名称。

Answer 2

可以，可以用第二个参数代替第三个参数的"ready function"，例子：

videojs("videoPlayer", { src: videoSrc, poster: videoPoster, preload: true } });

播放器准备就绪！

只是一个简单的提示：

您可以使用以下方法编写视频源：

src: "http://www.example.com/path/to/video.mp4"

或

src: { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" }

或

src: [
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
  { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
  { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]

第二个使 videojs 引擎检查它是否支持播放该文件变得容易。

如果播放器的浏览器不支持该文件，则最后一个播放器有机会播放另一种文件类型。

祝你好运，玩得开心:-)

理解这种模式：videojs("videoPlayer", {}, function(){}

Understanding this pattern: videojs("videoPlayer", {}, function(){}

javascript

video.js