<commit_before>
<!--[if lt IE 9]> <script src="scripts/lib/jquery.1.10.2.min.js" ></script> <![endif]-->
<!--[if gte IE 9]><!--> <script src="scripts/lib/jquery.2.0.0.min.js" ></script> <!--<![endif]-->
<script src="scripts/lib/require.js" ></script>
<link rel="stylesheet" href="//integration.player.sky.com/css/styles.min.css" />
<script src="//integration.player.sky.com/plugin/jquery.sky.htmlplayer.js"></script>
<script>
    window.videoOptions =  {
        token:"8D5B12D4-E1E6-48E8-AF24-F7B13050EE85",
        autoplay: true,
        videoId: 'clip-00cwoia5',
        freewheel: false, //disable ads
        placeHolderImage: '//static.video.sky.com/posterframes/skychasky.jpg'
    };
</script>


<div id=container style="width:360px;height:200px;">
    <div class="videocontrolcontainer">
        <video></video>
        <img class="posterFrame"/>
    </div>
</div>
You can see on the desktop, the controls seem a bit big;

<hr />

<h2>IE8 Close Video bug</h2>
<p>Click Play, click close - then the video will start playing again after closing.</p>
<p>This also demonstrates the need to click twice on mobile devices (e.g. iPhone)</p>
<p>We currently fix this with a workaround in our code: <code>$self.videocontrolcontainer.html($self.originalHtml);</code> after executing <code>close()</code>.
    but this cause another bug (below) with IE9 when the video gets resized...</p>
<a href="#!" class="play-video-0" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-0">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-0').on('click', function() {
        videoOptions.autoplay = true;
        $('video').sky_html5player(videoOptions);
    });
    $('.close-0').on('click', function(){
        sky.html5player.close($('#container'));
    })
</script>
<hr />

<h2>Workaround 1 (almost.. breaks ie9)</h2>
<p>Click Play, click close - will see a javascript error in the console</p>
<p>If we were to reset the videocontrolcontainer then resize, we then get a problem with IE9.</p>
<p>This is what we have been doing, as it errors, but doesn't stop the user from using the video or carousel</p>
<a href="#!" class="play-video-1" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-1">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-1').on('click', function() {
        videoOptions.autoplay = true;
        $('video').sky_html5player(videoOptions);
    });
    $('.close-1').on('click', function(){
        sky.html5player.close($('#container'));
        $('.videocontrolcontainer').html('<video></video><img class="posterFrame"/>');
        $('#container').css('height', '400px');    })
</script>
<hr />



<h2>Workaround 2 (almost.. breaks ie8)</h2>
<p>Click Play, click close - will see a javascript error in the console</p>
<p>If we reset the videocontrolcontainer after the resize has finished, we then get a problem with IE8...</p>
<a href="#!" class="play-video-2" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-2">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-2').on('click', function() {
        videoOptions.autoplay = true;
        $('video').sky_html5player(videoOptions);
    });
    $('.close-2').on('click', function(){
        sky.html5player.close($('#container'));
        $('#container').animate({ height: 400 }, 500, function(){
            $('.videocontrolcontainer').html('<video></video><img class="posterFrame"/>');
        });
    });
</script>
<hr />

<h2>Initialise then 'play' bug</h2>
<p>Click Play - nothing happens (With autoplay:false then calling play() manually). </p>
<a href="#!" class="play-video-3" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-3">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-3').on('click', function() {
        videoOptions.autoplay = false;
        $('video').sky_html5player(videoOptions);
        //do some funky stuff here...
        sky.html5player.play();
    });
    $('.close-3').on('click', function(){
        sky.html5player.close($('#container'));
    });
</script>
<hr />

<h2>S3 Start Video bug</h2>
<p>S3 is buggy with <code>autoplay:true</code></p>
<p>Click Play - nothing happens (With autoplay:true). Is flakey and seems to depend on race-condition</p>
<p>We currently fix this with a workaround in our code (below) but would obviously like not to do this (with a setTimeout)</p>
<a href="#!" class="play-video-4" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-4">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-4').on('click', function() {
        videoOptions.autoplay = true;
        $('video').sky_html5player(videoOptions);
    });
    $('.close-4').on('click', function(){
        sky.html5player.close($('#container'));
    });
</script>
<hr />


<h2>Queuing bug</h2>
<p>Click Play - js .setPlay error (With autoplay:false change height then .play()). </p>
<a href="#!" class="play-video-5" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-5">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-5').on('click', function() {
        videoOptions.autoplay = false;
        $('video').sky_html5player(videoOptions);
        $('#container').animate({ height: 400 }, 500, function(){
            sky.html5player.play();
        });
    });
    $('.close-5').on('click', function(){
        sky.html5player.close($('#container'));
    });
</script>
<hr /><commit_msg>AG|PM: video - add more bug comments<commit_after>
<!--[if lt IE 9]> <script src="scripts/lib/jquery.1.10.2.min.js" ></script> <![endif]-->
<!--[if gte IE 9]><!--> <script src="scripts/lib/jquery.2.0.0.min.js" ></script> <!--<![endif]-->
<script src="scripts/lib/require.js" ></script>
<link rel="stylesheet" href="//integration.player.sky.com/css/styles.min.css" />
<script src="//integration.player.sky.com/plugin/jquery.sky.htmlplayer.js"></script>
<script>
    window.videoOptions =  {
        token:"8D5B12D4-E1E6-48E8-AF24-F7B13050EE85",
        autoplay: true,
        videoId: 'clip-00cwoia5',
        freewheel: false, //disable ads
        placeHolderImage: '//static.video.sky.com/posterframes/skychasky.jpg'
    };
</script>


<div id=container style="width:360px;height:200px;">
    <div class="videocontrolcontainer">
        <video></video>
        <img class="posterFrame"/>
    </div>
</div>
You can see on the desktop, the controls seem a bit big;

<hr />

<h2>IE8 Close Video bug</h2>
<p>Click Play, click close - then the video will start playing again after closing.</p>
<p>This also demonstrates the need to click twice on mobile devices (e.g. iPhone)</p>
<p>We currently fix this with a workaround in our code: <code>$self.videocontrolcontainer.html($self.originalHtml);</code> after executing <code>close()</code>.
    but this cause another bug (below) with IE9 when the video gets resized...</p>
<a href="#!" class="play-video-0" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-0">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-0').on('click', function() {
        videoOptions.autoplay = true;
        $('video').sky_html5player(videoOptions);
    });
    $('.close-0').on('click', function(){
        sky.html5player.close($('#container'));
    })
</script>
<hr />

<h2>Workaround 1 (almost.. breaks ie9)</h2>
<p>Click Play, click close - will see a javascript error in the console</p>
<p>If we were to reset the videocontrolcontainer then resize, we then get a problem with IE9.</p>
<p>This is what we have been doing, as it errors, but doesn't stop the user from using the video or carousel</p>
<a href="#!" class="play-video-1" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-1">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-1').on('click', function() {
        videoOptions.autoplay = true;
        $('video').sky_html5player(videoOptions);
    });
    $('.close-1').on('click', function(){
        sky.html5player.close($('#container'));
        $('.videocontrolcontainer').html('<video></video><img class="posterFrame"/>');
        $('#container').css('height', '400px');    })
</script>
<hr />



<h2>Workaround 2 (almost.. breaks ie8)</h2>
<p>Click Play, click close - will see a javascript error in the console</p>
<p>If we reset the videocontrolcontainer after the resize has finished, we then get a problem with IE8...</p>
<a href="#!" class="play-video-2" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-2">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-2').on('click', function() {
        videoOptions.autoplay = true;
        $('video').sky_html5player(videoOptions);
    });
    $('.close-2').on('click', function(){
        sky.html5player.close($('#container'));
        $('#container').animate({ height: 400 }, 500, function(){
            $('.videocontrolcontainer').html('<video></video><img class="posterFrame"/>');
        });
    });
</script>
<hr />

<h2>Initialise then 'play' bug</h2>
<p>Click Play - nothing happens (With autoplay:false then calling play() manually). </p>
<a href="#!" class="play-video-3" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-3">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-3').on('click', function() {
        videoOptions.autoplay = false;
        $('video').sky_html5player(videoOptions);
        //do some funky stuff here...
        sky.html5player.play();
    });
    $('.close-3').on('click', function(){
        sky.html5player.close($('#container'));
    });
</script>
<hr />

<h2>S3 Start Video bug</h2>
<p>S3 is buggy with <code>autoplay:true</code></p>
<p>Click Play - nothing happens (With autoplay:true). Is flakey and seems to depend on race-condition</p>
<p>We currently fix this with a workaround in our code (below) but would obviously like not to do this (with a setTimeout)</p>
<a href="#!" class="play-video-4" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-4">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-4').on('click', function() {
        videoOptions.autoplay = true;
        $('video').sky_html5player(videoOptions);
    });
    $('.close-4').on('click', function(){
        sky.html5player.close($('#container'));
    });
</script>
<hr />


<h2>IE8 Queuing bug</h2>
<p>Click Play - js .setPlay error (With autoplay:false change height then .play()). </p>
<a href="#!" class="play-video-5" data-video-id="clip-00cwoia5">PLAY ME! </a><br/>
<a href="#!" class="close-5">
    <span class="at">Close</span>
</a>
<script>
    $('.play-video-5').on('click', function() {
        videoOptions.autoplay = false;
        $('video').sky_html5player(videoOptions);
        $('#container').animate({ height: 400 }, 500, function(){
            sky.html5player.play();
        });
    });
    $('.close-5').on('click', function(){
        sky.html5player.close($('#container'));
    });
</script>
<hr />
{'fraction_non_alphanumeric': 0.2134790857349354, 'fraction_numerical': 0.023760050591742705, 'mean_word_length': 3.553681612505142, 'pattern_counts': {'":': 0, '<': 273, '<?xml version=': 0, '>': 271, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4707898', 'n_tokens_mistral': 3886, 'n_tokens_neox': 3754, 'n_words': 890}