All geek questions in one place

Video.js - controls are not displayed in IE8

I implement video games and work in all browsers, however the controls are not visible, and the play button in IE8 is broken with Flash turned off.

After some digging, I made sure to use the latest versions of js and css, citing cdn.

Found a link to "boxWidth = box.offsetWidth", but I believe that this has been fixed since version 3.2.

The code is as follows and served through an iframe in colorbox.js

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/4.0/video.js"></script> </head> <body> <?php if (!empty($this->user) && $this->access === true) { ?> <div id="player" class="" style=""> <video id="video-player" class="video-js vjs-default-skin" controls autoplay width="640" height="480" datasetup="{}"> <source src="[VIDEOURL].mp4" type="video/mp4" /> <source src="[VIDEOURL].ogg" type="video/ogg" /> </video> </div> <?php } ?> <script> var player = videojs("video-player"); _V_.options.flash.swf = "[FLASHURL].swf"; </script> </body>

+4
source share
3 answers

For those who have the same problem after trying to solve in this thread, I just went through the same thing and found a fix (for the problem I had, at least).

VideoJS uses a font called VideoJS to represent control icons. To display the icons, it uses a font with a CSS3 :before , selector , which does not work in IE8 if in IE7 Standards mode .

Even if you can use IE8, perhaps the document mode is set to IE7, open the developer tools and make sure that you are not in IE7 mode:

IE document mode

+3
source

Not sure if you looked at the video-js.css , but I had the same problem.

When I checked video-js.css , I noticed that the default @font-face values ​​for the skin were pointing to invalid URLs.

As soon as I updated these settings to the correct values, where I installed the font folder (part of the video-js download package), everything worked correctly.

+1
source 
 data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }'

Try this and remove autorun controls from your code

0
source

Source: https://habr.com/ru/post/1482628/

More articles:


All Articles