Как встроить мой собственный нативный HTML5-плеер в наш проект angularjs? - PullRequest
Новая
       37

Как встроить мой собственный нативный HTML5-плеер в наш проект angularjs?

0 голосов
/ 28 декабря 2018

Во-первых, всем привет, у меня есть некоторые проблемы, и я знаю, что мои коды немного сложны и плохи. Мой босс поручил мне разработать интерактивный видеоплеер на родном видеоплеере hmtl5. Когда я разрабатывал этот плеер, я использовал фреймворк videojsдля некоторых моментов. А теперь мне нужно встроить этот плеер в наш проект angularjs. Я пытался встроить его, но не смог. Могу ли я импортировать как отдельный модуль в наш проект angularjs этого игрока?

Это мои html коды 

<!DOCTYPE html>
<html>
   <head>
      <meta name="description" content="A demonstration of creating a Video.js 5.x component.">
      <meta charset="utf-8">
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
      <title>Video.js Example Embed</title>
      <link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet">
      <script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="cssPlayer.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
   </head>
   <body style="font-family: 'Roboto', sans-serif;">

      <h1>Fight Club</h1>
      <div style="position: relative; max-width: 640px;" id="parentVideo">
         <video id="myPlayer" class="video-js" controls preload="auto"
                width="640" height="268" poster="fightClub.jpg"
                style="position: relative; max-width: 100%; height: auto;">
            <source id='mp4' src="https://www.youtube.com/watch?v=SUXWAEX2jlg"
                    type='video/mp4' />
         </video>

      </div>

   </body>
</html>
  1. Могу ли я выполнить эти коды после загрузки страницы?
  2. Могу ли я выполнить js код последовательно?
  3. Можноя встраиваю свои коды как внешние?

Как я могу решить эту проблему?На самом деле мне нужна помощь.

У меня есть несколько ключевых кодов javascripts, подобных этому 

var player = videojs('myPlayer');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);

Я использую addeventlistener для перехвата секунд и отображения некоторых активов(изображение, значок, внутри div). (должно работать каждую секунду)

...