video.js无法正常工作与jquery移动

我想在我的jquery移动项目中使用video.js（gitHub链接 - https://github.com/videojs/video.js）插件来获得自定义视频播放器，我遵循本网站的所有文档（http://videojs.com/），但由于一些原因，我收到以下错误 -video.js无法正常工作与jquery移动

元素或提供的ID无效。（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>

请帮我找出我做错了。使用的document.ready 内把videojs（XY-X）。就绪（....）

-I尝试 - 我也想在我的页面底部送我的脚本由（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移动

回答

相关问题