Question

我正在尝试在我的jquery移动项目中使用video.js（gitHub link - https://github.com/videojs/video.js）插件来获取自定义视频播放器，我按照此站点的所有文档（http://videojs.com/），但是由于某些原因，我遇到了以下错误 -

提供的元素或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（xyx）.ready（....） - 我也尝试按照（http://help.videojs.com/discussions/problems/985-api-ready-call-fails）的建议在我的页面底部发送我的脚本，但它仍无法正常工作

Answer 1

经过多次点击和试用后，我意识到我的事件在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();
        });
    }
});

video.js无法正常使用jquery mobile

1 个答案: