web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-02-04 11:43:27 +02:00
Code Releases Activity

Added a more informative and styled fallback message for non-html5 browsers that also have JavaScript disabled

Browse Source
This commit is contained in:
Steve Heffernan 2014-04-29 13:39:38 -07:00
parent 16eea0a1df
commit 227700a236
3 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/demo-files/demo.html
View File

@ -25,6 +25,7 @@
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</video>
</body>

2
sandbox/index.html.example
View File

@ -25,7 +25,7 @@
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
<track kind="captions" src="../build/demo-files/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<p>Video Playback Not Supported</p>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</video>
<script>

20
src/css/video-js.less
View File

@ -827,6 +827,26 @@ body.vjs-full-window {
visibility: visible;
}
/* In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
The .video-js classname on the video tag also isn't considered.
This optional paragraph inside the video tag can provide a message to users
about what's required to play video. */
.vjs-no-js {
padding: 20px;
color: #ccc;
background-color: #333;
font-size: 18px;
font-family: Arial, sans-serif;
text-align: center;
width: 300px;
height: 150px;
margin: 0px auto;
}
.vjs-no-js a, .vjs-no-js a:visited {
color: #F4A460;
}
// MIXINS
// =============================================================================
// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules