Video-JS + Colorbox，加载动态视频答案

【问题标题】：Video-JS + Colorbox, loading dynamic videosVideo-JS + Colorbox，加载动态视频
【发布时间】：2014-02-03 15:13:24
【问题描述】：

最近几天有一个问题让我很沮丧。

我的网站上有一些视频是从 sitecore 动态加载的，并显示在带有缩略图的页面上。当您单击这些图像时，您将被带到带有视频的灯箱。

问题是，视频在 Chrome、Firefox 和 IE8 - 中播放，但不是 IE9 +。我认为这可能是编码问题，但我已经多次将此视频转换为网络可用的每种格式，但无济于事。

我将插件设置为首先将视频加载为 flash，然后如果 flash 不可用，则加载为 html5。这将消除浏览器对 HTML5 视频支持方面的所有担忧。

我在想这可能是灯箱和 videoJS 插件相互争斗，或者我隐藏视频并显示它们的事实，我知道这有时会导致问题。我决定使用不同的灯箱，人们似乎说颜色箱是一个不错的与 videoJS 一起使用的灯箱，特别是因为它有一些内置的 onLoad 回调。

关于问题和代码：

问题：

这个灯箱正在工作，但是当我尝试重置播放器时 videoJS 似乎会抛出一些错误，因为它是一个愚蠢的浏览器，这会破坏 IE 中的视频。

正如您在底部的演示链接中看到的那样，视频在页面上设置时在 IE 中播放正常，但是当您通过按“vid1”或“vid2”打开灯箱时，您会感到困惑控制台错误，视频不再播放。

代码：

HTML + jScript：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js">    </script>

        <link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
        <script src="http://vjs.zencdn.net/4.3/video.js"></script>



        <link type="text/css" rel="stylesheet" href="colorbox.css" />
        <script type="text/javascript" src="js/jquery.colorbox.js"></script>

        <style type="text/css">
            .hide {
                display: none;   
            }
        </style>

    </head>
    <body>

        <script type="text/javascript">
            $(document).ready(function() {

                $(".inline", this).colorbox({ 
                    inline: true, 
                    rel: 'videohook', 
                    width: '650px',
                    onLoad: function() {

                        //grab the video ID and store it
                        var vidID = $(this).attr("data-vidID"); 

                        //Reset the video players 
                        videojs.players = {};

                        //set the videoJS player for this video.
                        videojs(vidID); 
                    }
                });

            });
        </script>

        <a rel="videohook" data-vidID="my_video_1" class="inline" href="#video_1">vid 1</a>
        <a rel="videohook" data-vidID="my_video_2" class="inline" href="#video_2">vid 2</a>

        <div id="video_1" class="video">
            <video id="my_video_1" class="video-js vjs-default-skin" controls
             preload="none" width="640" height="264" poster=""
             data-setup='{"techOrder": ["flash", "html5"]}'>
                <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4'>
                <source src="http://www.w3schools.com/html/mov_bbb.ogg" type='video/ogv'>
            </video>
        </div>

        <div id="video_2" class="video">
            <video id="my_video_2" class="video-js vjs-default-skin" controls
             preload="none" width="640" height="264" poster=""
             data-setup='{"techOrder": ["flash", "html5"]}'>
                <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4'>
                <source src="http://www.w3schools.com/html/mov_bbb.ogg" type='video/ogv'>
            </video>
        </div>


    </body>
</html>

我得到的控制台错误：

Uncaught TypeError: Object #<HTMLObjectElement> has no method 'vjs_getProperty'

现场演示：

到这里自己查看错误：http://kodistro.com

【问题讨论】：

标签： html5-video colorbox video.js

【解决方案1】：

在这种情况下，我的解决方案是将视频标签 HTML 注入到灯箱内容中（打开时），然后调用 videojs()。

所以，在伪代码中：

<script type="text/javascript">
        $(document).ready(function() {

            $(".inline", this).colorbox({ 
                inline: true, 
                rel: 'videohook', 
                width: '650px',
                height: '274', //the size most be fixed
                onLoad: function() {
                    var appendVideo1 = '<video id="my_video_1"......> </video>'; //insert the <video> tag. Note.Remove attribute data-setup='{"techOrder": ["flash", "html5"]}'                         
                    $("video_1").append(appendVideo1);
                },
                onComplete: function() {
                    videojs(my_video_1); //initialize video-js
                },
                onClosed: function() {
                    videojs(my_video_1).dispose(); //destroy video-js
                }
            });

        });
    </script>

    <a rel="videohook" data-vidID="my_video_1" class="inline" href="#video_1">vid 1</a>
    <div id="video_1" class="video">           
    </div>

【讨论】：