问题
I'm implementing videojs and have it working in all browsers however the controls are not visible and the play button is broken in IE8 with Flash fallback.
Following some digging, I've ensured that I'm using the latest versions of js and css by linking to the cdn.
Saw a reference to "boxWidth = box.offsetWidth" but I believe this was corrected since v3.2.
The code is as follows and served up via 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>
回答1:
For anyone having the same problem after trying the solutions in this thread, I just went through the same thing and found a fix (for the problem I was having, at least).
VideoJS uses a font called VideoJS
to represent the control icons. To display the icons, it uses the font with the CSS3 :before
selector, which does not work in IE8 if in IE7 Standards mode.
Even though you may be using IE8, it's possible the document mode has been set to IE7, Open up the developer tools, and make sure that you aren't on IE7 mode:
回答2:
Not sure if you looked at the video-js.css
file, but I hade the exact same problem.
When I inspected video-js.css
, I noticed that the @font-face
values for the default skin were pointing to the wrong URL's.
Once I updated these settings to the correct values for where I had installed the font folder (part of the video-js download package), everything worked correctly.
回答3:
data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }'
Try this and remove controls autoplay from your code
来源:https://stackoverflow.com/questions/16741987/video-js-controls-not-displaying-in-ie8