Last active
June 19, 2018 22:44
-
-
Save odev79/6f30981e24123ad7df3c to your computer and use it in GitHub Desktop.
Video.js Example Embed - Reloaded
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="author" content="Oscar Estrada"> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>Video.js Example Embed</title> | |
| <script src="http://vjs.zencdn.net/5-unsafe/video.js"></script> | |
| <link rel="stylesheet" href="https://vjs.zencdn.net/5-unsafe/video-js.css" type="text/css"> | |
| <script> | |
| function lightsOff() { | |
| restoreColor = document.body.style.backgroundColor; | |
| var e = document.body; | |
| e.style.backgroundColor = "black"; | |
| var t = document.getElementById("restofpage"); | |
| t.style.opacity = .25 | |
| } | |
| function lightsOn() { | |
| var e = document.body; | |
| e.style.backgroundColor = restoreColor; | |
| var t = document.getElementById("restofpage"); | |
| t.style.opacity = 1 | |
| } | |
| function vjsdimmer() { | |
| var e = document.getElementsByTagName("video")[0]; | |
| e.addEventListener("playing", lightsOff, !1), e.addEventListener("pause", lightsOn, !1), e.addEventListener("ended", lightsOn, !1) | |
| } | |
| var restoreColor; | |
| </script> | |
| </head> | |
| <body onload="vjsdimmer()"> | |
| <div id="restofpage"></div> | |
| <h1>Video.js Example Embed</h1> | |
| <div class="video-container"> | |
| <video id="player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload width="640" height="264" | |
| poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"fluid": true, "playbackRates": [0.5, 1, 2], "html5": {"nativeTextTracks": false}}'> | |
| <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> | |
| <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"> | |
| <track kind="captions" src="http://www.videojs.com/vtt/captions.vtt" srclang="en" label="captions on" default> | |
| </video> | |
| </div> | |
| </body> | |
| </html> |
Hi there,
I m facing this error can you please help me out of this. Thanks
Failed to load http://www.videojs.com/vtt/captions.vtt: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Bassed in this issues.
• Make Play-Button centered (or centerable)
videojs/video.js#502
dragosmocrii commented on 25 Jun 2014
To center the button use this:
.vjs-big-play-button { top:0; left:0; right:0; bottom:0; margin:auto; }
• Implemented playbackRate/speed setting (2x, 0.5x, etc.)
videojs/video.js#220
heff commented on 10 Jul 2014
It is included. You just have to define the speeds you want to provide like in this example:http://jsbin.com/vikun/1/edit
<video id="my_video_1" class="video-js vjs-default-skin" …… data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'>
………….
</video>
• Responsive Sizing
videojs/video.js#982
digitalmoksha commented on 14 Oct 2014
I have tried using the CSS only solution mentioned by @j4k3 on Aug 2. In general, this worked well for me. However, the aspect ratio was somehow thrown off just enough to create extra "space" above/below the video. Could not figure out how to fix that.
The CSS solution is basically the same as outlined in the css-tricks article (as well as other places): Fluid Width Video. In there they put height: 0; in the wrapper, which in this case is the .video-js:afterblock. Adding this closed up the extra space.
.video-js { width:100%!important; height: auto!important; }
.video-js:after { content:'.'; display:block; position:relative; padding:40.1% 0 0; margin:0 0 0 -100%; visibility:hidden; height:0; }