Question

过去几天有一个让我感到沮丧的问题。

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

问题是，视频在Chrome，Firefox和IE8中播放，但不是IE9 +。我认为这可能是一个编码问题，但我已将此视频转换为网络上可用的每种格式都无效。

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

我当时认为它可能是灯箱和videoJS插件相互争斗，或者我隐藏视频并显示它们的事实，我知道它有时会导致问题。我决定使用不同的灯箱，人们似乎已经说过colorbox与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

Answer 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>

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

1 个答案: