locked
html5 video will play in IE9 locally but not remotely RRS feed

  • Question

  • I have an install of drupal on both my local machine and on my server. The .MP4 source has the correct h.264 encoding that ie requires. If I view the webpage locally with ie9 the video plays just fine. If I attempt to play it on the live site it won't load. I suspected it might be a mime type issue accept that Safari requires mp4 as well and it will play just fine on local and live through Safari. 

    I'm running out of ideas as to what may be causing this to happen. 

    Saturday, January 12, 2013 3:06 PM

Answers

  • Hi,

    configure your webserver MIME types for the video formats you support.

    and

    ensure that you are using the default IE security zone settings (which has a setting for MIME sniffing)

    Tools>Internet Options>Security tab, click "Reset all zones to default".

    You troubleshoot this kind of issue by running the Networking tab of the Developer tool and observing the mime type of the response headers (f12>Networking tab, click "Start Capturing"

    see http://dailymotion.com/html5 for an excellent html5 video implementation.

    you may like to add the follow event handler to your <video> element, that will report the error message encounter when a <video> tag fails.

        <script type="text/ecmascript">
            var isPlaying = false;
            function playItem(url) {
                var vid = document.getElementById('vidMain');
                vid.pause();
                vid.src = '';
                vid.src = url;
                vid.play();
    
            }
            function togglePlay(vid) {
                if (!vid.src == '') {
                    if (isPlaying) {
                        vid.pause();
                    } else {vid.play();}
                }
             }
        function getMediaErrorString(vid) {
            try {
                switch (vid.error.code) {
                    case vid.error.MEDIA_ERR_ABORTED:
                        return 'You aborted the video playback.';
                    case vid.error.MEDIA_ERR_NETWORK:
                        return 'A network error caused the video download to fail part-way.';
                    case vid.error.MEDIA_ERR_DECODE:
                        return 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support.';
                    case vid.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
                        return 'The video could not be loaded, either because the server or network failed or because the format is not supported.';
                    default:
                        return 'An unknown error occurred.';
                }
            }
            catch (exp) {
                return 'Your browser does not fully implement the HTML5 video element.';
            }
        }
        function toggleFullScreen() {
            var container = document.getElementById('divVideoContainer');
            if (container.style.position == 'relative') {
                container.style.position = 'absolute';
                //container.style.left = '10%';
                container.style.width = screen.width + 'px';
                document.getElementById('vidMain').style.width = screen.width + 'px';
                container.style.height = 'auto';
                container.style.margin = '0px';
                document.body.style.overflow = 'hidden';
            }
            else {
    
                container.style.position = 'relative';
                container.style.left = '0px';
                container.style.margin = '10px';
                container.style.width = '';
                document.getElementById('vidMain').style.width = '100%';
                document.body.style.overflow = 'auto';
            }
    
        }
    </script>
    

    for questions about html, css and scripting please post to the IE Web Development forum... with a link to your website for the support engineers to inspect and troubleshoot. http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads

    If using the built-in web server in Visual Studio ("Cassini") you will have to install the "Mime Helper" Nuget Plugin to configure the asp.net servers' mime types for development purposes.

    Regards.


    Rob^_^

    • Marked as answer by tracycai Monday, January 21, 2013 7:48 AM
    Sunday, January 13, 2013 11:58 PM