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.
Related
I'm running a VueJS application that displays a full screen story of videos. I don't create as many tag as number of media in my story : I'm just changing component video sources each time I play a new video.
But it looks like Safari (Desktop & mobile) still does not cache HTML video once loaded : when I'm playing again a previous media, Safari is downloading again the asset. Instead of getting from cache like Chrome does.
The same issue has already been reported here but sill no correct answer.
Safari even stops downloading the final bytes video (producing a sort of timeout) when we go back and forth quicky in the story, so the story looks stuck.
Here's an example link.
Does anyone know a good alternative that avoids re-downloading video data at each play on Safari ?
Partial solution
Found myself a workaround that works pretty well if video is small size - all video are less than 3Mb in my case.
The trick is to use js fetch API to download full video, then stream it into video tag.
const videoRequest = fetch("/path/to/video.mp4")
.then(response => response.blob());
videoRequest.then(blob => {
video.src = window.URL.createObjectURL(blob);
});
Contrary to video src attribute, fetch API will get video data from cache if the same video was already fetched before.
Here a codepen demo that can be tested in Safari desktop/mobile (when NOT in private mode).
Pro : Video are now pulled from cache in Safari !
Con : You can't start the video until full data has been downloaded. That's why this solution can be used only for small video (like < 5Mb), else your users may wait a while before being able to play the video.
Hi I am using opentok.
When I say
publisher = OT.initPublisher();
session.publish(publisher);
My own video is visible to myself. I want to see only other participants video but not my own. I want my video to be visible to everyone else in the session except me.
How to make this possible.
And can I make other people video to full-screen?
Please help...
You can try this...
var publisher = OT.initPublisher('myPublisherDiv', {display: 'none'});
session.publish(publisher);
Or you can explicitly check on the video using firebug or chrome dev tool and see if it has an existing class or id, then you can just add in a display none on the class ex.
.video-class{
display:none
}
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
I am working on an app and would like to display all the comments for a given Soundcloud track in real time. We have created a custom html5 audio player and it is not the format of the standard embedabble soundcloud player. The comments should show up in a given space and follow the progress of the song. It would display the comment with a timestamp of "5 seconds" when the song has played for 5 seconds, etc.
Currently we have only found that you must make a separate API call for each new comment.
The custom player from SoundCloud doesn't support this at the moment.
But if you're building a player using the SC.stream function of the SoundCloud JS SDK you can use the ontimedcomments options:
SC.stream("/tracks", {
autoPlay: true,
ontimedcomments: function(comments){
console.log("First Comment at this timestamp", comments[0].body);
}
});
The only downside with this is that you have to build the player UI yourself.
There are some more examples in this post: http://developers.soundcloud.com/blog/rich-media-using-timed-comments
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.