video.js
Video.js - open source HTML5 & Flash video player
HTML5 Video Player | Video.js video.js is a javascript and css library that makes it easier to work with and build on html5 video. this is also known as an html5 video player.
we're migrating our player from Flowplayer to Video.js.
In our current Flowplayer installation we do use an option to add a watermark over our videos:
flowplayer( .. , .. , {logo:{'url':'/path/to/watermark.png'}});
Which would be the best way to replicate this behavior in Video.js ?
Ideally the solution will be a CSS which we already tried (using a background in a upper layer with higher z-index) But that watermark gets lost when you go fullscreen,
Any idea? Thanks in advance
Source: (StackOverflow)
Playing around with the newest video.js today, I'm noticing that video.js.map is showing up as a 404 when putting the video.js script into a site that I'm working on.
I don't see a source map file in the initial distribution, but it doesn't throw this error locally, only when I put it on a server.
Ideas as to solving?
Source: (StackOverflow)
I have a weird issue in Chrome.
Each time I load a <video> element, chrome will start two HTTP request.
The first one will stay pending forever (I guess this is the "meta-data", "partial content" request. But the point is that it stay pending)
The second one to the same file is ok and goes on and close after the loading is over.
The problem here is that the first request stay pending until I close the browser page. So at some point, if I load multiple video, Chrome will break and stop downloading anything because every available request is occupied by these pending requests.
I created a reduced test case here: http://jsbin.com/ixifiq/3
I've check to reproduce the issue, and it is happening on both Video.js and MediaElements.js frontpages. Open your network tab when loading the page, you'll see the first pending request. Then press play on the video, and you'll see the second request working, but the first one will stay pending forever.
Does anyone knows a fix to this bug?
Source: (StackOverflow)
How do I play a .SWF file using the video.js player?
I've played around with the code below, but I can not get it to work.
When I open the .swf file directly (using open with IE), I then I am able to play the .swf file that way.
JavaScript:
// path to location of swf-file
_V_.options.flash.swf = "video-js.swf";
// flashvars
_V_.options.flash.flashVars = {
file: "./ExportSWF/Recording.swf", //file to be played
autostart: "false",
provider: "http",
"http.startparam": "start"
};
// object params
_V_.options.flash.params = {
allowfullscreen: "true",
wmode: "transparent",
allowscriptaccess: "always"
};
HTML:
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="400" height="300">
Source: (StackOverflow)
i have this weird behavior on html5 video tag.
I have 4 videos, that i want to play at the same time.
So i create my own control bar to play/pause, so when play button is clicked, all 4 videos is played, same as pause button.
On safari, it has weird problem, the video didn't play at the same time, 1 or 2 videos have delay when i click play, so not all videos playing at the same time.
On Chrome and Firefox it's working allright, what's wrong with safari?
I'm using javascript .play() function to play all videos.
I also make sure the video is loaded before playing it. Something like,
<video id="example_video_1" class="video-js vjs-default-skin" preload="auto">
<source src="asset/video/al_vertrag_kranken_v1_part1.ogv" type='video/ogg' />
<source src="asset/video/al_vertrag_kranken_v1_part1.mp4" type='video/mp4' />
<source src="asset/video/al_vertrag_kranken_v1_part1.webm" type='video/webm' />
</video>
video_1 = document.getElementById('example_video_1');
if (video_1.readyState == 4 && video_2.readyState == 4 && video_3.readyState == 4 && video_4.readyState == 4) {
video_1.play();
video_2.play();
video_3.play();
}
there's 3 more video tag like that, that 1 is only example.
Source: (StackOverflow)
The video player actually loads fine. My actual problem is when I refresh some parts of my page with AJAX and those parts contains a video player, the HTML5 player loads fine, but not the Video.js part that customizes it.
The video.js file is loaded in the header of the page. I have read the doc and can't find how to initialize a video player on a page that has already been loaded. Isn't there a myPlayer.initialize() kind of function I can call when my part of page containing the video is loaded to make the video player load correctly with Video.js?
I think the video.js file does it automatically only on page load.
Thanks for your precious help!
Source: (StackOverflow)
On VideoJS website you state that support was moved to StackOverflow, so let's try it here. I've got the following code:
var player = _V_('the_id', {}, function(){
jQuery('.remove').on('click.destroyvideojs', function(){
player.destroy();
jQuery(this).unbind('click.destroyvideojs');
});
});
It initializes video at first and it destroys it.
But when I want to initialize it again using the same exact piece of code, it doesn't work. It doesn't initialize the script on the same element ID (when it was removed from DOM and added again with correct initialization call after it's been added). I'm wondering why this might be happening?
Another try today:
var the_id = 'my_id';
var player = _V_(the_id, {}, function(){
player.destroy();
_V_(the_id, {}, function(){
alert('reinit');
});
});
So, re-initialization of VideoJS simply doesn't work. Furthermore, it removed controls from the video now.
Source: (StackOverflow)
I have some general doubts about the player. I'll list them:
Does video.js support HLS video format? If it does, on what plataforms? (Browser, Devices, browser...?). Sorry, I searched for this on the web site and didn't find anything.
I saw that Ogg and MP4 file formats are the most supported file types, and WebM isn't so much. I have searched about what's WebM... is that HLS? Are there other supported file formats than those not listed on the website?
Does video.js support Video Advertising and Google Analytics?
Playback features, something like a list in the final of a video where I can choose another one. Is that possible?
Is there support to adaptive streaming? That is, adjust the quality of a video delivered to a web page based on changing network conditions?
Is it easy to customize the player creating skins and applying them on it? Can I put a symbol of my web site on the player, for example?
I think is that.
I'll be very happy if anyone could help.
Source: (StackOverflow)
I'm using Video.js to play back videos in MP4 format on a client's website.
The player uses html5 video and Adobe Flash Player as a fallback.
(In my case it seems to use Flash always so I don't know if the problem exists in the native html5 player as well.)
The video only starts playing after the *.mp4 file is completely loaded. So no buffer for a few seconds. The file must be completely downloaded by the browser before it starts playing.
When the video is long, the visitor has to wait very long before he can even see that the video is working.
The question now is, is it the browser, the script (video.js) or the video file that creates that problem.
On the videojs.com website however the video is playing back while loading, so works properly. Therefore I think it can't be the browser.
Has anyone else had that problem? How can I fix this issue?
Any advice is very much appreciated!
Thanks
Max
Source: (StackOverflow)
I use video.js for video play. When not using an iframe, clicking the full screen button works as expected. However, when using an iframe, the full screen button doesn't work. Why is this?
The homepage of video.js is http://videojs.com/
the code of iframe page is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<iframe src="sco01-m.htm" id="cw" name="cw" width="100%" height="1000px;" scrolling="no" frameborder="0"></iframe>
</body>
</html>
the code of sco01-m.htm page is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel='nofollow' href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<body>
<div align="center">
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="800" height="600" poster="1.jpg"
data-setup="{}">
<source src="A-2-4.mp4" type='video/mp4'>
<source src="oceans-clip.webm" type='video/webm'>
</video>
</div>
</body>
</html>
The sco01-m.htm page can use the fullscreen button, But the iframe page can't use.
Source: (StackOverflow)
I'm coding a basic video marquee and one of the key requirements is that the videos need to be able to advance while keeping the player in full screen.
Using Video.js (4.1.0) I have been able to get everything work correctly except that I cannot get the captions to change when switching to another video.
Either inserting a "track" tag when the player HTML is first created or adding a track to the 'options' object when the player is initialized are the only ways I can get the player to display the "CC" button and show captions. However, I cannot re-initialize the player while in full screen so changing the track that way will not work.
I have tried addTextTrack and addTextTracks and both show that the tracks have been added - using something like console.log(videoObject.textTracks()) - but the player never shows them or the "CC" button.
Here is my code, any help is greatly appreciated:
;(function(window,undefined) {
// VIDEOS OBJECT
var videos = [
{"volume":"70","title":"TEST 1","url":"test1.mp4","type":"mp4"},
{"volume":"80","title":"TEST 2","url":"test2.mp4","type":"mp4"},
{"volume":"90","title":"TEST 3","url":"test3.mp4","type":"mp4"}
];
// CONSTANTS
var VIDEO_BOX_ID = "jbunow_marquee_video_box", NAV_TEXT_ID = "jbunow_marquee_nav_text", NAV_ARROWS_ID = "jbunow_marquee_nav_arrows", VIDEO_OBJ_ID = "jbunow_marquee_video", NAV_PREV_ID = "jbunow_nav_prev", NAV_NEXT_ID = "jbunow_nav_next";
// GLOBAL VARIABLS
var videoObject;
var currentTrack = 0;
var videoObjectCreated = false;
var controlBarHideTimeout;
jQuery(document).ready(function(){
// CREATE NAV ARROWS AND LISTENERS, THEN START MARQUEE
var navArrowsHtml = "<div id='" + NAV_PREV_ID + "' title='Play Previous Video'></div>";
navArrowsHtml += "<div id='" + NAV_NEXT_ID + "' title='Play Next Video'></div>";
jQuery('#' + NAV_ARROWS_ID).html(navArrowsHtml);
jQuery('#' + NAV_PREV_ID).on('click',function() { ChangeVideo(GetPrevVideo()); });
jQuery('#' + NAV_NEXT_ID).on('click',function() { ChangeVideo(GetNextVideo()); });
ChangeVideo(currentTrack);
});
var ChangeVideo = function(newIndex) {
var videoBox = jQuery('#' + VIDEO_BOX_ID);
if (!videoObjectCreated) {
// LOAD PLAYER HTML
videoBox.html(GetPlayerHtml());
// INITIALIZE VIDEO-JS
videojs(VIDEO_OBJ_ID, {}, function(){
videoObject = this;
// LISTENERS
videoObject.on("ended", function() { ChangeVideo(GetNextVideo()); });
videoObject.on("loadeddata", function () { videoObject.play(); });
videoObjectCreated = true;
PlayVideo(newIndex);
});
} else { PlayVideo(newIndex); }
}
var PlayVideo = function(newIndex) {
// TRY ADDING MULTIPLE TRACKS
videoObject.addTextTracks([{ kind: 'captions', label: 'English2', language: 'en', srclang: 'en', src: 'track2.vtt' }]);
// TRY ADDING HTML
//jQuery('#' + VIDEO_OBJ_ID + ' video').eq(0).append("<track kind='captions' src='track2.vtt' srclang='en' label='English' default />");
// TRY ADDING SINGLE TRACK THEN SHOWING USING RETURNED ID
//var newTrack = videoObject.addTextTrack('captions', 'English2', 'en', { kind: 'captions', label: 'English2', language: 'en', srclang: 'en', src: 'track2.vtt' });
//videoObject.showTextTrack(newTrack.id_, newTrack.kind_);
videoObject.volume(parseFloat(videos[newIndex]["volume"]) / 100); // SET START VOLUME
videoObject.src({ type: "video/" + videos[newIndex]["type"], src: videos[newIndex]["url"] }); // SET NEW SRC
videoObject.load();
videoObject.ready(function () {
videoObject.play();
clearTimeout(controlBarHideTimeout);
controlBarHideTimeout = setTimeout(function() { videoObject.controlBar.fadeOut(); }, 2000);
jQuery('#' + NAV_TEXT_ID).fadeOut(150, function() {
currentTrack = newIndex;
var navHtml = "";
navHtml += "<h1>Now Playing</h1><h2>" + videos[newIndex]["title"] + "</h2>";
if (videos.length > 1) { navHtml += "<h1>Up Next</h1><h2>" + videos[GetNextVideo()]["title"] + "</h2>"; }
jQuery('#' + NAV_TEXT_ID).html(navHtml).fadeIn(250);
});
});
}
var GetPlayerHtml = function() {
var playerHtml = "";
playerHtml += "<video id='" + VIDEO_OBJ_ID + "' class='video-js vjs-default-skin' controls='controls' preload='auto' width='560' height='315'>";
playerHtml += "<source src='' type='video/mp4' />";
//playerHtml += "<track kind='captions' src='track.vtt' srclang='en' label='English' default='default' />";
playerHtml += "</video>";
return playerHtml;
}
var GetNextVideo = function() {
if (currentTrack >= videos.length - 1) { return 0; }
else { return (currentTrack + 1); }
}
var GetPrevVideo = function() {
if (currentTrack <= 0) { return videos.length - 1; }
else { return (currentTrack - 1); }
}
})(window);
Source: (StackOverflow)
Where should I host a video to be able to control playback rate from 25% speed all the way up to 1,000% speed (10x faster)?
Controlling playback speed is easy with HTML5 <video>. However I can't find a video host to support the speed range I need.
Options I've considered:
Self-hosting
One option is to host the video on my own servers. From what I've read this comes with a lot of complications, and it's preferred to host on existing services (Youtube, Vimeo, Brightcove, etc).
Youtube
I looked through the YouTube video API, but it only has a certain range of playback rates that doesn't sound like it gets up to 1,000% speed. Although I own the videos, so maybe I have control over available playback rates them when I upload?
Vimeo
No playback rate controls.
Brightcove
API has a function for setting playback rate. But also requires paying...
Source: (StackOverflow)
I know this question has been asked a number of times, and I've looked through every single one of them here on StackOverflow.
I'm simply trying to loop a 5 second MP4 video in an HTML5 player and have it be seamless. I've tried both jwplayer and video.js, both locally and on webspace, and neither do the trick. I've tried using the "ended" events; I've tried preloading/prebuffering; I've tried listening for the final second of a video and then seeking to the beginning to bypass the stop/play events entirely. I still always see jitter, and I still always see the loading icon (latest Chrome & Firefox).
For reference, here's some of my latest code for video.js:
<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
width="640" height="480"
data-setup='{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}'>
<source src="video/loop_me.mp4" type="video/mp4" />
</video>
<script type="text/javascript">
var myPlayer = videojs("loop_me");
videojs("loop_me").ready(function(){
this.on("timeupdate", function(){
var whereYouAt = myPlayer.currentTime();
if (whereYouAt > 4) {
myPlayer.currentTime(1);
}
});
});
</script>
Has anyone managed to do this successfully? And, if so, could you please post a complete solution? I don't normally ask for or want those, but I think it might be necessary this time.
Source: (StackOverflow)
I would like to show the big play button at the end of the video, so user can replay it easily.
It seems that this big play button is shown by default (every posts I read are for hidding it instead of showing it...), but it is not the case for me...
I have tried to edit the following function (in video.dev.js file) but nothing has changed :
vjs.Player.prototype.onEnded = function(){
if (this.options_['loop']) {
this.currentTime(0);
this.play();
}
else { // I am not using loop mode
this.bigPlayButton.show();
this.pause();
}
};
Thanks for your responses.
Source: (StackOverflow)