Currently, I am facing issue with Limelight player. It is playing flash videos with Limelight player and player ID is the argument which is passed for the flash videos.
Flash player videos are causing issue and we need to change the approach to play HTML5 videos instead of flash player.But I can't see or find any relevant code in which video stream from limelight player can be feed into the HTML5 player.
Any suggestions or code snippets for making Limelight videos being played with the HTML5 player will be very helpful.
Regards
I am currently working on it and its bit of complex but here is what limelight came with :
<div id="limelight_player_659410"></div><script src="//video.limelight.com/player/limelightjs-player.js"></script>
<script>LimelightPlayerUtil.embed({"height":321,"playerId":"limelight_player_659410","width":480,"mediaId":"c3713feac461425e8889d55689358352","playerForm":"Player"});</script>
First approach is to create limelight callback function:
function limelightPlayerCallback(playerId, eventName, data) {
console.dir(data);
colsole.log(data.thumbnailUrl);
console.log(data.title);
console.log(data.description);
}
So when you call :
LimelightPlayerUtil.embed({"width":"480px","height":"300px", "playerId":"HEREisYOURcontainerID", "mediaId":"HEREisYOURmediaId", "playerForm":"Player"});
your limelightPlayerCallback will get "data".
Now you can see in console all data.proprties and use which one you want to manipulate HTML5 Video tag and display data.
Second approach: Not sure if this link is valid by limelight but I was able to get it from calls I was making :
https://production-ps.lvp.llnw.net/r/PlaylistService/media/d7d5b0ec19e1441781c3df4209fe5cb6/getMobilePlaylistByMediaId
This link will return JSON with all properties. Please note that "d7d5b0ec19e1441781c3df4209fe5cb6" is video ID so replace and use any of your video IDs. Once you get JSON you will get URL and you can inject HTML5 video tag :)
Related
Is there a way to play music on a website using only a URL to a Youtube video/playlist? (Similar to how you can play and queue music using a discord music bot.) I am hoping to allow the user to input a Youtube URL and have my audio player play the audio of the video.
I have tried looking into libraries and such that would help with this, but there is very little on the subject. I've also looked into discord.js, and although I don't understand it fully, I am unsure if it will be compatible for making something not associated with discord.
EDIT: I am using the audio tag in order to play music and 2 libraries that I am using 2 other web APIs that depend on the audio tag.
Full answer :)
Note that it plays the particular video, no way you can do that with audio (as much as i know and as much as i can)
<input id="videourl"><button onClick="do()">Load</button>
<video id="video"></video>
<script>
function do(){
var x = document.getElementById("videourl").value;
document.getElementById("video").src = x;
}
</script>
Well you can request post to a yt to audio website and etc. etc. but it will be hard. Why not YOU figure out yourself to hide that video so only audio is audible? Use css to turn down the video opacity.
If video doesnt work, use iframe.
I have YouTube video embedded on my webpage. Can I control it by using JS?
I need to retrieve total length of the video and get events when user changes trackbar position (or position changed during playback).
Plyr.js
Using Plyr.js you can control YouTube (and also Vimeo) video with a simple HTML5 media player with 3 steps:
Embedding a YouTube video:
<div id="myVideo" data-type="youtube" data-video-id="4IP_E7efGWE"> </div>
Getting player instance (setup):
var videoEl = $('#myVideo').get(),
player = plyr.setup(videoEl);
Handling events and using methods:
player[0].on('playing', function(event) {
var instance = event.detail.plyr;
console.log(" >playing");
console.log(" >duration: " + instance.getDuration());
});
Example:
here is a jsfiddle: https://jsfiddle.net/beaver71/2g5ggcfa/
When it comes to youtube embeds the Youtube Iframe Player API will supply most of the functions needed for controlling/monitoring events from an embedded youtube video (refer to IFrame Player API
Reference).
If you want to get the length of the video you can use player.getDuration(), more details are available in the API documentation.
In regards to trackbar events the API doesn't supply a direct way to monitor those events but there is a hacky way to do it as mentioned in This question.
Another way to achieve this is by using a 3rd-party library like beaver mentioned in the comment section.
Hope this helps.
Question:
How can I control the sound output of this embedded video without overly complicating things?
Possible Solution (Complex)
I've looked into the youtube javascript control API, and, correct me if I'm wrong, but that will force me to incorporate a lot of complication into the setup to accomplish what appears to be a very simple task.
Note:
This is all only tested for webkit at this stage
Setup:
I've created an element that simulates an iphone controlling the channel of a tv by swapping youtube videos like so:
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
});
where the #channel-1 id is connected to a specific button on the remote, and the tv id is connected to the video player.
It looks like this:
Edit:
If the API is the only to accomplish this, please include a link to a comprehensive tutorial teaching the youtube web API, because I've looked, and found nothing. The only thing I've found so far is the official API page, and that's like trying to learn PHP from the manual.
For loading videos you would use loadVideoById rather than the rather odd snippet you have in your question and to play without audio you simply mute the player using player.mute() (where player is a reference retrieved from the youtube player element itself like described here). And one last thing, don't forget to add enablejsapi=1 to the url of the player as described here.
I would use
event.target.mute();
What is the best way to create a video player similar to the youtube video player in that after the video has played, it shows a collection of further videos to watch?
The videos are not hosted on youtube.
Generating the video suggestions is not a problem. The problem is displaying them in the player after the video finished playing in such a way that if the user clicks one of the suggestions, the selected video page is opened and played.
Can I do this in html5 or jquery or flash or something else?
JWPlayer is a good HTML5 video player with a Flash fallback. It also has a decent API which supports related videos: http://www.longtailvideo.com/support/addons/related-videos/22352/related-videos-reference-guide/.
There are a few license options too: http://www.longtailvideo.com/jw-player/pricing/
Hope that helps.
Can be done in Flash. You could use the FLVPlayback Component to play the original video. Then use the Listener Class to listen for COMPLETE. You could then place thumbnails for each of the related videos on top of the FLVPlayback Component - these would then load the new video into the component and the process would continue.
Check this tutorial out for using the component and also the Listener Class for the component.
I have a YouTube's player in the webpage. I need to change the video played by this player dynamicaly.
This is (relatively) easy using YouTube's chromeless player. It has method loadVideoById() which works perfectly. The problem is, that the chromeless player doesn't have any controls (play/pause, etc.). The regular YouTube player has all this, but it doesn't have the loadVideoById() method.
Is there any way to include the controls of regular player into chromeless player, or to implement loadVideoById() method in the regular player?
Thanks.
You can not do that, cause the calls in the "regular youtube player" have the VideoID in the URL instead as a parameter:
Regular Video: http://www.youtube.com/v/VIDEO_ID&enablejsapi=1&playerapiid=ytplayer
Chromeless: http://www.youtube.com/apiplayer?enablejsapi=1
Instead of that you can easily create your own function that changes the Embbebed SWF, i mean, say that you are using swfobject for the "Regular Player", then using createSWF function you will be able to replace the previous video for the actual one dynamically.
Hope this help you.
You can do this...
http://code.google.com/apis/ajax/playground/#change_the_playing_video
FYI there also a jQuery plugin that can do it for you, and provide you with a ton of controls!
http://tikku.com/jquery-youtube-tubeplayer-plugin
https://github.com/nirvanatikku/jQuery-TubePlayer-Plugin
I found it easier to use loadVideoByUrl() as an alternative to loadVideoByIdl() instead of using createSWF, you don't have to mess with the swfobject this way, it's a built-in function...just use the video ID to create a youtube swf url such as: url="http://www.youtube.com/e/" + VIDEO_ID + "?enablejsapi=1&version=3" and submit using the loadVideoByUrl() function like this: player.loadVideoByUrl(url)
That way you don't have to mess with the swfobject, it's spelled out here:
http://code.google.com/apis/youtube/js_api_reference.html#loadVideoById
"player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
Loads and plays the specified video.
* The mediaContentUrl must be a fully qualified YouTube player URL in the format http://www.youtube.com/e/VIDEO_ID. In YouTube Data API video feeds, the url attribute of the <media:content> tag contains a fully qualified player URL when the tag's format attribute has a value of 5.
* startSeconds accepts a float/integer and specifies the time from which the video should start playing. If startSeconds (number can be a float) is specified, the video will start from the closest keyframe to the specified time."