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.
Related
I want to embed a youtube video on my own website and I want this youtube video not to be skipped in any way, but not to adjust its speed and to track the time it watches, but I could not find any source.
I tried to use the youtube iframe api, but I can't follow the stats without stopping or starting the youtube video there.
I would suggest that you should first download the video, and then put it onto your site through a <video> tag. The youtube iframe api is designed only for having videos that function exactly like they do on the youtube website, which includes the things you don't want.
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 am currently working on a google chrome extension that features a content script for altering youtube pages. I have done some work with altering the DOM already and all of that works, however, I have been looking for solutions to have the youtube video pause when the page loads.
I initially thought perhaps I could simulate a keystroke as the spacebar pauses youtube videos. I also tried using javascript to pause the video but I don't think it works with Youtube's custom video player.
Don't feel obligated to write any code for this but if someone could point me in the right direction I would be very grateful.
On the main page of a video, the HTML5 video element playing the video has a specific class, so you can target that; and as an HTML5 video element, it has the play() and pause() methods already.
document.querySelectorAll('.html5-main-video').forEach(vid => vid.pause());
That will pause all HTML5 main videos on the page. Helpfully enough, that's the same class used by the little autoplaying video on some channel pages, so it should work for those as well :)
(Don't worry about Flash videos; YouTube hasn't supported those for years now.)
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 :)
I need to check if a user has actually seen an embedded youtube video (meaning that he pressed play and saw until the end). Is it possible to do this with the youtube api (javascript)?
Thank you very much
Regards
Using the Youtube API is the most easiest way determining if the user clicked the play button.
For starters check out the Google Youtube Api:
https://developers.google.com/youtube/js_api_reference
You will be needing to use the Swfobject.js to load the video to use the Youtube API controls
on loading the video don't forget to add a listener (addListener)
when the API or the video was loaded you will able to see the state of the videos , here are those:
"-1" - video is ready to play
"1" - the video is playing (it clicked the play button)
"2" - the video is paused
"0" - end of the video
Sample coding on checking the current state of the loaded video:
https://developers.google.com/youtube/js_api_reference#SubscribingEvents
If it is a chromeless YouTube player or if you embedded the video via JW Player, then it is possible.
The chromeless player will strip out the coding and allow you to embed
the YouTube video like javascript, once done, then you can embed a
Google Analytics extension snippet/code to the address of the video
and track the hits that way. Another way is installing JW Player which
allows you to easily track analytics for YouTube videos by
incorporating your Google Analytics UPI.