I'm developing with the Youtube Chromeless player.
My player size is 400 x 225px.
By default, Youtube sets videos quality at a "small" level with these dimensions.
Yet, as videos with "small" quality look ugly, I would like to upgrade them to the "medium" quality level.
This is my code:
ytplayer.loadVideoById(youtube_id, start, "medium");
Unfortunately, it does not seem to work... When I do some inspection on my console:
ytplayer.getPlaybackQuality();
"small"
Is someone experiencing the same issues with the Youtube API? If not, how do you specify the quality of your Youtube videos?
====== Edit =======
I've realized that once the video has started, the setPlaybackQuality function works. Therefore, I tried the hack below. It's perfectly working but would rather find another solution...
ytplayer.loadVideoById(YOUTUBE_ID, START);
setTimeout(function(){
// If medium quality available
if(ytplayer.getAvailableQualityLevels().indexOf("medium") != -1){
ytplayer.setPlaybackQuality("medium");
}
},1000)
Thanks a lot,
Dam
Ok I finally managed to solve this problem.
I did a different hack but way less ugly. Here it is:
function onYoutubePlayerReady(playerId){
[...]
// Add event listener to monitor quality
ytplayer.addEventListener("onPlaybackQualityChange","onQualityChange");
// Triggers the video
ytplayer.loadVideoById(youtube_id, start, "medium");
[...]
}
And this is the event listener in charge of forcing the videos quality to "medium"
function onQualityChange(qualityState){
if(qualityState != "medium" && ytplayer.getAvailableQualityLevels().indexOf("medium") != -1){
ytplayer.setPlaybackQuality("medium");
}
}
Now works like a charm.
If you have any suggestion, please let me know.
Related
I am trying to test WebRTC and want to display my own stream as well as the peer's stream. I currently have a simple shim to obtain the camera's stream and pipe that into a video element, however the frame rate is extremely low. The rare thing about this is that I can try examples from the WebRTC site and they work flawlessly.. The video is smooth and there are no problems. I go to the console and my code resembles theirs.. What could be happening? I tried to create both a fiddle and run that code within brackets but it still performs horribly.
video = document.getElementById('usr-cam');
navigator.mediaDevices.getUserMedia({video : {
width : {exact : 320},
height : {exact: 240}
}})
.then(function(stream){
if(navigator.mozGetUserMedia)
{
video.mozSrcObject = stream;
}
else
{
video.srcObject = stream;
}
})
.catch(function(e){
alert(e);
});
Pretty much everything I do. Take into account that I am using the new navigator.mediaDevices() API instead of navigator.getUserMedia() but I don't see how that would matter since 1.I am using a shim provided by the WebRTC group named adapter.js which they themselves use. 2. I don't think how you obtain hold of the video stream would affect performance.
Alright, I feel very stupid for this one... I was kind of deceived by the fact that the video element will update the displayed image without you having to do anything but pipe the output stream, which means the image will update but just at really long intervals, making it seem as if the video is lagging. What I forgot to do was actually play() the video or add autoplay as its property... it works well now.
A few years ago, Adobe had an OSMF video player wiki, and one of the examples on the wiki teaches on how to execute something for an specific ammount of time, while the video is playing using the javascript api's.
The wiki is no longer online, so I'm no longer able to access the example. How to get the current video time? I'm able to get currently the player status but not the video time. My code is below:
function onJavaScriptBridgeCreated(playerId){
var player = document.getElementById(playerId);
playerswf=document.getElementById(playerId);
var state = player.getState();
if(state=="playing"){
isplaying=1;
completeFunc();
}else{
isplaying=0;
}
}
I think that you can do like this :
player = document.getElementById(playerId);
player.addEventListener("currentTimeChange", "onCurrentTimeChange");
function onCurrentTimeChange(time, playerId)
{
document.getElementById("currentTime").innerHTML = time;
}
This code is a part of an OSMF working example which you can find here. There are many other examples attached to the source code which you can download from sourceforge.
Hope that can help.
We are playing videos from a server. We attach an 'ontimeupdate' event which fires periodically, as the video plays. For slow connections, we can compare where the video currently IS, to where it SHOULD be. Then we can do some other things we need to do, if it is lagging. Everything works fine in Chrome, FF, IE. In Safari, when the connection is slow, the event only fires twice. Why does it get removed? Is there a way to add the event again, inside of the handler for the event? Thanks
The HTML5 audio/video element is still less than perfect. The biggest issues I've noticed is that it doesn't always behave the same way in every browser. I do not know why the timeupdate event stops firing in Safari, but one option you have is to monitor whether the video is playing or not and verifying the information independently. Example,
$(video).bind('play', function() {
playing = true;
}).bind('pause', function() {
playing = false;
}).bind('ended', function() {
playing = false;
})
function yourCheck() {
if (playing) {
if (video.currentTime != timeItShouldBe) {
//do something
}
} else {
return;
}
setTimeout( yourCheck(), 100);
}
Something to that effect. Its not perfect, but neither is the current HTML5 audio/video element. Good luck.
The event will not fire if the currentTime does not change, so it may not be firing if the video has stopped playing to buffer. However, there are other events you can listen for:
1) "stalled" - browser is trying to load the video file, but it's not getting anything from the network.
2) "waiting" - playback has stopped because you ran out of buffered data, but it will probably pick up again once more data comes in from the network. This is probably the most useful one for you.
3) "playing" - playback has resumed. Not to be confused with "play" which just means it's "trying" to play. This event fires when the video is actually playing.
4) "progress" - browser got more data from the network. Sometimes just fires every so often, but it can also fire after it recovers from the "stalled" state.
See the spec for reference.
I've heard some people say that these events can be unreliable in some browsers, but they seem to be working just fine here: http://www.w3.org/2010/05/video/mediaevents.html
If you want to be extra cautious, you can also poll periodically (with a timeout as tpdietz wrote) and check the state of the video. The readyState property will tell you whether you have enough data to show the current frame ( >= 2 ), enough to keep playing at least a little bit into the future ( >= 3 ) or enough to play all the way to the end (probably). You can also use the buffered property to see how much of the video has actually been buffered ahead of where you're playing, so you can roughly estimate the data rate (if you know how big the file is).
MDN has a great reference on all these properties and events.
Is there a way when you hide controls and still be able to pause / play video ?
I've seen that when controls are visible the player works fine and reported no other problem.
I tried to find an answer on docs but no luck. So is there a way to do this ?
Many thanks and great work here!
Video.js works like the html5 video video element, where if you turn off controls the only way to control the video is through the API. The easiest way to set up what I think you're talking about would be to do the following.
videojs('my_video_id').on('click', function(){
if (this.paused()) {
this.play();
} else {
this.pause();
}
});
So im working on a school project for a museum, we are making an info screen with a video to play for the visitors, ill like to make a function so that if one visitor is pausing the video and leave it will reset after 20 sec or so. So the next visitor dont have to reset the video by him self.
Any easy way to do that?
I just use the standard html5 video player and controls.
http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
it might help
probably you need to write your required code within
if (video.paused == true)
{
//find out code to find whether its been paused for 20 second.....may be use some timer control to get this
if(20secPaused)
{
video.currentTime = time;
}
hope it helps :)
I got help on a danish forum
a guy made an example i could modify for my own project it worked for me
the solution:
http://netkoder.dk/test/test0221.html