2017-01-31 4 views
0

Я недавний беженец с планеты Flex/Actionscript, и я все еще разбираюсь в основах, поэтому, вероятно, это довольно простой вопрос. смущены ниже линии:.Понимание этого шаблона: videojs («videoPlayer», {}, function() {}

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

Хотя я использую его успешно (ниже) не в полной мере понять это Он, кажется, направляя глобальный videojs объект, чтобы найти экземпляр ид «видеоплеер», с необязательные параметры ({}), а затем вызвать анонимную функцию в экземпляре.

Есть ли у меня это право? Что вызвало мое замешательство, это необязательные параметры ({}). Могу ли я использовать это для передачи в src и poster и пропустить функцию? У этого шаблона есть имя, и оно распространено?

Не стесняйтесь кричать на меня, если это дубликат ...


Контекст: Я строю приложение на рабочем столе с помощью Electron для размещения Timeline.js, в котором я доступа и отображения локальных файлов .mp4 , Timeline.js использует iFrame как вариант «включить что угодно», поэтому у меня есть файл «video.html» в качестве источника для iFrame. В формате JSON на временной шкале, я использую строку запроса для передачи Params в плавающем фрейме для Video.js


<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>", 
     }, 
+0

Не может быть объяснено в документации Video.js? – JJJ

+0

@JJJ мой вопрос выходит за рамки 'Video.js', чтобы понять специфику кода, а не только API. –

+1

Это не очень шаблон. videojs - это функция. Кто-то написал это, и вы просто называете его тремя параметрами - строкой, пустым объектным литералом и функцией. Что принято в param 2 - это вопрос для документов VideoJS. Надеюсь, это не слишком основательно :) –

ответ

0

Это все вплоть до реализации videojs.

second {} parameter является «пустым объектом», но позволяет вам передавать дополнительные параметры, если хотите.

third parameter (где у вас есть анонимная функция) - это функция, которая запускается после загрузки и инициализации видеоjs.

Все это объясняется в документации по видео js, но поскольку вы новичок в javascript, я прощаю, поскольку как «пустой объект {}» может быть для вас новой концепцией, а может быть тот факт, что javascript файлы требуют времени для загрузки асинхронно, а затем, конечно, их код требует времени для инициализации, поэтому в хороших сторонних библиотеках часто реализуется «запускать этот код при инициализации», передавая функцию.

Итак, да, это довольно распространенный шаблон реализации для инициализации сторонних библиотек javascript, но я не верю, что у него есть определенное имя.

+0

спасибо - это то, что мне нужно было знать. Все это совсем не похоже на классный ActionScript, поэтому эти глобальные функции и т. Д. Немного запутывают. –

1

Да, вы можете использовать второй параметр, чтобы заменить «готовую функцию» третий параметр, например:

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 проверьте, поддерживает ли он воспроизведение этого файла.

Последний дает возможность игроку воспроизводить альтернативный тип файла, если его браузер не поддерживает файл в указанном порядке.

Удачи и счастливой игры :-)