My question is how to add new components(control buttons) on video.js player.
For example, adding a button to allow to change the video playback rate.
Giving a simple example would be much helpful. Thank you very much.
It doesn't appear VideoJS Supports playback-rate directly, but from my understanding it's just a fancy wrapper for an HTML5 Video Element.
According to this stack overflow question/answer you can change the playback rate of HTML5 video directly on the DOM Element as referenced by the W3C HTML5 Video Wiki Entry.
You probably will have to side-step VideoJS to do this as the support doesn't look baked in. Also, there may be issues between browsers over support of this attribute.
As for simply adding controls, VideoJS implements a Javascript API you can use to control the element but it seems pretty limited to the most basic of controls (play/pause/goto/fullscreen/etc...)
The default controls the player has don't seem to be greatly customizable so if you wish to provide a clearer experience, you can probably disable the in-video controls and re-implement your own in html/dom/js underneath the video element.
Example:
With some really simple html & Javascript, you can wire up some simple controls.
HTML:
<video id="Vid" ...>
</video>
<div id="Controls">
<a id="Play" href="#Play">Play</a> - <a id="Pause" href="#Pause">Pause</a>
</div>
JS:
_V_("Vid").ready(function() {
var player = this;
var playbutton = document.getElementById("Play");
var pausebutton = document.getElementById("Pause");
playbutton.onclick = function(event) {
player.play();
};
pausebutton.onclick = function(event) {
player.pause();
};
});
After searching for this myself, I have found a similar thing happening at the very bottom of the tracks.js file.
// Add Buttons to controlBar
_V_.merge(_V_.ControlBar.prototype.options.components, {
"subtitlesButton": {},
"captionsButton": {},
"chaptersButton": {}
});
From tracks.js https://github.com/videojs/video.js/blob/master/src/js/tracks.js
Related
In Firefox when a video tag is wrapped in an a tag, using the standard video controls when clicking on the video to pause it also re-directs. How can I make it behave like the other browsers where for example clicking on pause only pauses the video and does NOT re-direct as well. This is what I need.
Here is a simple demo: http://jsfiddle.net/me2loveit2/cSTGM/
<a href="http://www.google.com" target="_blank">
<video controls="" muted="" preload="auto" id="testid" width="500">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
<source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm"/>
<img src="http://dummyimage.com/1044x585/000/fff"/>
</video>
</a>
What you've got there is invalid markup, the HTML5 spec clearly states that
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
and the video navigation is in fact interactive content containing buttons.
For some reason clicking the controls in Chrome does not trigger the anchor, while in Firefox it does.
This is dependant on how the browser constructs the controls with the Shadow DOM, and as the markup is invalid and there is no real standard for this, it's anyone's guess.
What you should have done is to remove the anchor and use javascript to redirect when the video is clicked, something like this
$('#testid').on('click', function() {
var win = window.open('http://www.google.com', '_blank');
win.focus();
});
That would have given you valid markup as you could just remove the wrapping anchor, but it doesn't solve the problem with not redirecting when clicking the controls either, it's exactly the same, as the controls are still inside the video and triggers the click handler in Firefox, but not in Chrome.
In webkit the controls could potentially have been targeted somehow with the -webkit-media-controls pseudo class, however Firefox doesn't seem to have any such pseudo class, so that won't work either.
What you're left with is relying on the fact that the controls seem to always be at the bottom, and they are around 30 pixels high, so you can just overlay the anchor on top of the video and leave out a little part of the bottom.
This will work in all browsers, and you'll have valid markup.
<video controls="" muted="" autoplay preload="auto" id="testid" width="500">
<!-- stuff -->
</video>
To make sure the anchor is placed correctly and has the correct size, a little javascript can be used
$('.overlay').each(function() {
var vid = $(this).prev('video');
$(this).css({
position : 'fixed',
top : vid.offset().top + 'px',
left : vid.offset().left + 'px',
width : vid.width() + 'px',
height : (vid.height() - 30) + 'px',
});
});
FIDDLE
Other than using custom controls, I am not sure it's possible to get around the control behavior in a truly elegant way, given that the video events (play, pause, etc) trigger after the click events. This is a solution that hardcodes the approximate height of the default controls. I don't like the hardcoding, but in other respects I think it is OK. It applies to all a and video elements and doesn't do any excessive iterating through elements. The setTimeout bit is a workaround for event.preventDefault() killing both the link behavior and the play/pause behavior.
$(document).on('click', 'a', function(event) {
var video = $('video:hover').first();
if (video.length && video.offset().top + video.height() - event.pageY < 35) {
var anchor = $(this);
var href = anchor.attr('href');
var target = anchor.attr('target');
anchor.attr('href', 'javascript:;');
anchor.attr('target', null);
setTimeout(function() {
anchor.attr('href', href);
anchor.attr('target', target);
}, 1);
}
});
You can accomplish this by creating custom controls for your video and wrap only the video tag with the a tag and not the controls. This gives you the option of having consistent looking controls for your video across browsers, but you have to have a good understanding of CSS to make it look good and consistent across browsers. I have included a CodePen project of what you wanted, with some custom controls. The controls don't look very good across browsers, but I think you can get the idea.
http://codepen.io/anon/pen/dtHsb
Very ugly, but the usual solutions don't works because event.stropPropagation() only work for event handlers and event.preventDefault() breaks the controls.
http://jsfiddle.net/cSTGM/28/
$('#testid').click(function() {
link = $(this).parent();
originalHref = link.attr('href');
originalTarget = link.attr('target');
link.attr('href', 'javascript:void(0)');
link.attr('target', '_self');
setTimeout(function() {
link.attr('href', originalHref);
link.attr('target', originalTarget);
}, 0);
});
We just need to prevent redirecting if it is VIDEO tag
$('#testid').click(function() {
if (event.target.tagName !=== 'VIDEO') {
//redirect
}
});
Site plays a full screen video with sound. The site was designed to play the video without sound. When a link is clicked the other portions of the site appear on top of the video.
Unfortunately the client has insisted on having sound, so when something is clicked you still hear the music until the video ends. I know it is possible to have the video stop or even have it muted when a link is clicked but I cannot seem to understand where exactly to implement this. Your help is appreciated. I'm not a jquery person so I'm rather dim on this. Site uses the YTPlayer ( http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/ )
The site: http://www.bradfordweb.com/clients/concannon2/
The code in the page that is playing the video is:
<a id="P2" class="player" data-property="{videoURL:'http://youtu.be/OgAr2jQr3rg',containment:'#home',autoPlay:true, mute:false, loop:false, opacity:.6}"></a>
The link is:
<div class="link-home"><div class="cl-effect-8"><span>ABOUT US</span> </div></div>
I tried:
onclick="stop()"
and
stopYTP
I found the function in the jquery.mb.YTPlayer.js file:
stopYTP: function () {
var YTPlayer = this.get(0);
var controls = jQuery("#controlBar_" + YTPlayer.id);
var playBtn = controls.find(".mb_YTVPPlaypause");
playBtn.html(jQuery.mbYTPlayer.controls.play);
YTPlayer.player.stopVideo();
},
Help?
I've had this issue as well and found it in the onYouTubePlayerReady function.
Look for it in that file and do the following changes:
function onYouTubePlayerReady(playerId) {
var player=$("#"+playerId);
player.mb_setMovie();
// Remove or comment out the lines below.
// $(document).on("mousedown",function(e){
// if(e.target.tagName.toLowerCase() == "a")
// player.pauseYTP();
// });
}
That line just simply binds the mousedown event on an a tag and consequently pauses the player.
Hope that helps.
I'm doing a html5 audio player so I'm trying to use a custom player. I don't want to use the default <audio> tag interface. I want to do my own html/css styles for the player.
My actual code(it works)
if('webkitAudioContext' in window) {
var myAudioContext = new webkitAudioContext();
}
request = new XMLHttpRequest();
request.open('GET', 'http://96.47.236.72:8364/;', true);
request.responseType = 'arraybuffer';
request.addEventListener('load', bufferSound, false);
request.send();
function bufferSound(event) {
var request = event.target;
var source = myAudioContext.createBufferSource();
source.buffer = myAudioContext.createBuffer(request.response, false);
source.connect(myAudioContext.destination);
source.noteOn(0);
}
http://jsfiddle.net/EY54q/1/
Does someone know how can to edit this player style, or do something to use my own html/css code to execute this player?
You can completely make your own style. just forget about the controls option (you can simply use controls and do not need to use controls="controls"). Just create buttons/divs/whatever, style them, and add an eventlistener that controls the audio interface:
html:
<button id="playpause">play
<!--you can style the content with anything!-->
</button>
<audio id="player">
<source src="http://96.47.236.72:8364/;" />
</audio>
JS:
window.player = document.getElementById('player');
document.getElementById('playpause').onclick = function () {
if (player.paused) {
player.play();
this.innerHTML = 'pause';
} else {
player.pause();
this.innerHTML = 'play';
}
}
http://jsfiddle.net/LqM9D/1/
I see you are also using the audio api. Please note that you can't just dump an audio file in a buffer. It needs to be decoded to raw PCM. This takes a lot of time. A really easy method is to create a source node which is linked to the audio element:
var source = context.createMediaElementSoure(player); //we defined player in the first block of code
To make your page a bit more cross-browser capable:
window.AudioContext = window.AudioContext||window.webkitAudioContext;
context = new AudioContext();
Edit:
I think you want to know what else you can do with the element.
You can also make a slider for the timeline, and a volume slider/mute button, although I'd prefer the latter two to do that on a gainnode at the end of a line of filters and such.
Yes. It is possible via "shadow dom". You just need to enable it in your browser and write styles for elements, that will arrive.
As I understend - it is browser specific feature. But for webkit-based styling of "shadow dom" work perfect.
There is not so many info, however this feature already used in full. For example see this question: Why do no user-agents implement the CSS cursor style for video elements
If you enable displaying shadow dom in inspector setting, you will se how it works. (Also there is public list with selectors list - https://gist.github.com/afabbro/3759334)
For other browsers you need check support of working with "shadow dom".
I'm trying to play a sound when i click or hover over my play button? Here's what i have so far. I have a button, if i hover over it it changes the Image, now i also want it to play an mp3.
play a {
position:relative;
float:left;
width:155px;
height:134px;
background-image:url(../images/Goodsound_PLAY_UP.png);
}
play a:hover {
background-image:url(../images/Goodsound_PLAY_P.png);
I want to play a sound here
}
Im sorry for asking such an easy question. I'm an html noob, started last week.
It's not that easy to play a sound in HTML. In fact, it wasn't until the html5 audio was there ! Even if html5 is not supported everywhere, it's now a little bit easier to play a sound in the browser.
My advice is to use mediaelementJS, a javascript library that fills the gap between old browser and html5 audio (and video) spec. Do not use the player (that comes with a full control bar), but use only the mediaelementjs component. To use it, simply include the library in the head of your page
<script src="js/libs/mediaelement.min.js"></script>
First, you have to put an audio tag in your html :
<audio id="mySound" src="my_audio_file.mp3" type="audio/mpeg"></audio>
Then, call the Mediaelement library
var mySound = new MediaElement('mySound');
Finally, play it on your click or over event (here I use jQuery)
$('.play a').mouseover(function(){ mySound.play() });
You can use this:
JavaScript
var audio = $("#audio");
$("play a").mouseenter( function() {
audio.play();
}
where audio is an <audio> element, and play a is element which is hover.
Using jQuery:
$("object_element_id") .on ('mouseover', function(e){
// audio play code here
});
$("object_element_id") .on ('mouseout', function(e){
// audio pause/stop code here
});
Why "on"? Just imagine a "AJAX page refresh". For remove it:
$("object_element_id") .off ('mouseenter');
Why "mouseover" and "mouseout"? Maybe you want to add extra functions for each status, like change IMG SRC of the button, make some effects... feel free. And why the "e" element? The E element is the object who fired the event - the image, the link etc. Do everything with it (or just remove it).
For audio play, you can use HTML5 tags. It's easy and are supported by the major browsers (you didn't asked "retrocompatibility") You can cache the element (like Mateusz' answer) and use it:
var $audio = $("#audio_element_id"); //for cache the element
$audio.setAttribute('src', url_link); //for change the URL file (ir can be MP3, OGG...)
$audio.play(); //for the mouseover
$audio.stop(); //for the mouseout
Then, the final code:
var $audio = $("audio_element"); //caching
$("object_element_id") .on ('mouseover', function(e){
$audio.play();
});
$("object_element_id") .on ('mouseout', function(e){
$audio.stop();
});
You might also find this code useful (I think it is fairly modern, so it might not work with old browsers; I use it with Firefox 32).
<audio controls> <source src="song.mp3" type="audio/mpeg"> </audio>
There is a similar one for video, too:
<video width="320" height="240" controls> <source src="clip.mp4" type="video/mp4"> </video>
I want to pause the video being played at a particular instant till a question that pops up has been answered. The user should not be able to go ahead and forward the video till a particular question that has just poppped up has been answered.
So I can pause the video using JS at that particular instant. How can I ensure the video's controls are unlocked or the video plays again only after answering the question that pops up?
look at this demo http://jsfiddle.net/dgLds/58/
var video = document.getElementById("myvideo");
function toggleControls() {
document.getElementById('myvideo').pause();
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
<video id="myvideo">
<source src="http://www.w3schools.com/html5/movie.mp4" />
</video>
<p onclick="toggleControls();">Toggle</p>
instead of on click you can call the function when ever you want
Here is a opera article on everything you wish to know about html5 video http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
Specifically look at How to keep things synchronized section
EDIT: I you want to disable right-click options. Just go ahead and disable right click on that tag/id
Here is a jquery code
$('video').bind('contextmenu', function()
{
alert('no right click.');
return false;
});
I ran into the need to be able to disable the context menu myself today because we have our own custom controls. You can do this fairly easily:
video.addEventListener('contextmenu', function(e) {
e.preventDefault();
return false;
});
He is an example built upon Web Developer's demo: http://jsfiddle.net/dgLds/308/
There is a pause() method available for the video element:
document.getElementById('myVideo').pause();
Similarly, there is play().