0

I'm creating an MVC 5 application, and in the view I'm using videojs. It works in Firefox and Chrome but in IE 11 I get the following error in the console:

"Object doesn't support property or method 'querySelector'"

The above error is occurring in video.js on line 175 column 62. The video doesn't work as a result of this. I'm on Windows 7 Enterprise 64 bit. Using Internet Explorer version 11.0.9600.18015. I realize the browser says it's a problem with the video.js file, but just for thoroughness here is the tag rendered by IE 11 from the MVC app:

        <div id="VideoDiv" style="margin-top:10px;">
              <video id="example_video_1" 
                     class="video-js vjs-default-skin" 
                     width="750" 
                     height="400" 
                     preload="none"
                     data-setup='{ "techOrder": ["html5"],  "controls":true,  "autoplay" : false}'>
                        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"/>
            </video>

       </div>

Here is the original code for the tag from the view:

    <div id="VideoDiv" style="margin-top:10px;">
         <video id="example_video_1" 
                class="video-js vjs-default-skin"          
                width="@Model.VideoOptions.Width.ToString()"
                height="@Model.VideoOptions.Height.ToString()"
                preload="none"
                @(Model.VideoOptions.IsYouTube ? Html.Raw(string.Format("src='{0}'", Model.VideoOptions.VideoSource) ) : null)
               data-setup='{ "techOrder": [@Html.Raw(Model.VideoOptions.TechOrder)], @Html.Raw(string.Format(" \"controls\":{0}", Model.VideoOptions.IncludeControls.ToString().ToLower())),  "autoplay" : @Model.VideoOptions.Autoplay.ToString().ToLower()}'>
                    @if (!Model.VideoOptions.IsYouTube)
                    {
                         <source src="@Model.VideoOptions.VideoSource" type="@Model.VideoOptions.VideoSourceType"/>
                    }
       </video>

   </div>

Does anyone have any ideas as to why it isn't working?

Michelle
  • 231
  • 3
  • 16

1 Answers1

3

The solution to this problem was to add the

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

tag as the first item in the Head.

Object doesn't support property or method 'querySelector' shows when accessing site by machine name in IE11

edit from link that i sent:

Apparently setting

<!DOCTYPE html>

inside the page was not enough to appease Internet Explorer. The browser was still picking up IE7 as its default document mode when referencing my site by http://machine:80

This was due to the default Compatibility Settings in Internet Explorer for viewing internal sites that cause IE to silently behave differently than it would for external sites.

Setting the X-UA-Compatible meta tag explicitly declares that internal browsers should be receiving the site in Edge mode without the requirement to administrate Compatibility Settings, but must be specified as the first tag in the head in order to have this effect.

Community
  • 1
  • 1
Omidam81
  • 1,887
  • 12
  • 20