video.js не работает должным образом с jQuery mobile

Я пытаюсь использовать video.js (gitHub link - https://github.com/videojs/video.js) плагин в моем мобильном проекте jquery, чтобы получить пользовательский видеоплеер, я следил за всей документацией с этого сайта (http://videojs.com/), но по некоторым причинам я получаю следующие ошибки:video.js не работает должным образом с jQuery mobile

Неверный элемент или идентификатор. (videojs).
этот [a] не является функцией.

Мой код -


 

 
    <!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <script src="Js/jquery.js"></script> 
 
    <script src="Js/jquery.signalR-2.1.2.min.js"></script> 
 
    <script src="Js/jquery.mobile-1.4.5.js"></script> 
 
    <link href="mcss/jquery.mobile-1.4.5.css" rel="stylesheet" /> 
 
    <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"> 
 
    <script src="http://vjs.zencdn.net/4.12/video.js"></script> 
 
    <script type="text/javascript">  
 
     videojs("Mobile_VIDEO_1").ready(function() { 
 
      var vid = this; 
 
      vid.on("ended", function() { 
 
       alert("is"); 
 
       $("#videoListXYZ").css("display", "block"); 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <div data-role="page" id="p-forget-password"> 
 
     <div data-role="main" class="ui-content ui-body-cf ui-responsive"> 
 
      <!-- inserted dyanamically using handlebars template "http://handlebarsjs.com"/ --> 
 
      <video id="Mobile_VIDEO_1" class="video-js vjs-default-skin" controls data-id="{{VideoId}}" data-setup='{ "plugins" : { "resolutionSelector" : { "default_res" : "360" } } }' autoplay="autoplay" width="340" height="250"> 
 
       <source src="{{Path}}" type="video/mp4" data-res="360" /> 
 
      </video>     
 
     </div>         
 
    </div> 
 
</body>

Пожалуйста, помогите мне узнать, что я делаю неправильно.

-I попытался с помощью кладя videojs (хухи) .ready (....) внутри document.ready - Я также попытался посылать мой сценарий в нижней части моей страницы, как это было предложено (http://help.videojs.com/discussions/problems/985-api-ready-call-fails), но до сих пор не работа

источник

2015-11-04 Manjeet Singh

После многих ударов и испытаний я понял, что мое событие много увольняется перед инициализацией DOM, поэтому я искал, как проверить, когда вся страница полностью загружена, и я сталкиваюсь с этим документом (https://css-tricks.com/snippets/jquery/run-javascript-only-after-entire-page-has-loaded/) по этой ссылке Я использовал это

$(window).bind("load", function() { 
    // code here 
});

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

$(window).bind("load", function() { 
    var videoPath = $('#sv1').attr('src'); //to get the path of video 
    if (videoPath != "" && videoPath != null) { //checking for non-empty path 
     console.log(videoPath); 
     videojs('MY_VIDEO_1', { "plugins": { "resolutionSelector": { "default_res": "360" } } }, function() { 
      console.log('Good to go!'); 
      this.play(); 
      this.on('ended', function() { 
       console.log('awww...over so soon?'); 
       $("#videoList").css("display", "block"); 
      }); 
     }); 
     $("#replay").click(function() { 
      var myPlayer = videojs("MY_VIDEO_1"); 
      myPlayer.play(); 
     }); 
    } 
});

источник

2015-11-05 13:34:50

video.js не работает должным образом с jQuery mobile

ответ

Смежные вопросы