Samsung Smart TV Play Youtube Video - youtube

I'm making a Samsung Smart TV application. I need to play youtube videos.
Does anyone have any idea how to do this? I tried youtube js api but when the function playVideo() is executing the video just starts loading but not playing.
I have Samsung Smart TV 2012 so the SDK is 3.5

First of all check if your youtube video has granted access for mobile devices.
Second you have to disable advertisements on that video - as videos with advertisements doesn't work yet on TV devices.
Sometimes it takes a while after playVideo() to start playing the video, especially when you bind to some player events, so try to wait half or one minute.
If this won't help, please paste your code here - youtube embedding and your JS calls and I'll try to help.
EDIT
Try to use flash embedding like in Samsung docs.
As a movie parameter pass the src to YouTube API player:
<object type="application/x-shockwave-flash" id="playerObject">
<param name="movie" value="http://www.youtube.com/apiplayer?&enablejsapi=1"></param>
<param name="allowScriptAccess" value="always"></param>
<param name="allowFullScreen" value="true"></param>
<param name="wmode" value="transparent"></param>
</object>
And use this methods:
var ytPlayer = null;
function onYouTubePlayerReady() {
ytPlayer = document.getElementById('playerObject');
if (ytPlayer) {
ytPlayer.addEventListener('onStateChange','onChange');
ytPlayer.addEventListener('onError', 'onError');
ytPlayer.cueVideoById('i4iDWXstrWY'); //load video for play http://www.youtube.com/watch?v=i4iDWXstrWY
} else {
alert("error");
}
}
function onChange(newState) {
//Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5)
switch (newState) {
case 5:
ytPlayer.playVideo();
break;
}
function onError(errorCode) {
alert(errorCode);
}
When the player is ready, the API will call the onYouTubePlayerReady callback function. I think that in your solution you are missing the cueVideoById method. As it is said in YT API doc
Plays the currently cued/loaded video.

I really shouldn't be telling you guys this because you'll be able to make apps that compete with mine... but out of frustration with Samsung I will tell you: just host the darn thing as a webpage on a web server (using whatever YouTube API you like, or no API and just changing up the embed code on page load), control which video it plays using a querystring argument, then iFrame it into your Samsung Smart TV app. YouTube has severe embedding restrictions if you try and embed in an app that is not a web page... so stick in web page, then stick web page in app.
This is the general architecture you use for ANY in-app content on a Samsung Smart TV that needs to run in a web browser. The Samsung browser is blessed with being an HTML5 browser that also supports Flash. Samsung Smart TV apps allow IFraming of web content with absolutely no security restrictions. Put 2 and 2 together and you can pretty much do whatever you want on these glorified toasters... keeping in mind that you want to UNLOAD these IFrames (setting their SRC attribute to "" using JQuery is an adequate way to do this) when you change scenes because they do not unload themselves and these TVs have very little RAM.
Have fun guys :)

Related

Hls video streaming on iOS/Safari

I am trying to stream hls on safari iOS with Aframe that has three.js under the hood. But the video shows a black screen with just the audio playing. The video src is of type .m3u8. I tried to read through a lot of related posts but none seem to have a proper solution. Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS? If not, can some one please help me with a solution.
A couple of discussions on the issues that are available on github:
HLS m3u8 video streaming
HLS on Safari
To your question:
Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS?
Yes, wishful thinking :-) The problem/issue/bug is with Apple, not any library. No matter what the JS library, A-Frame, Three, etc, this will always be an issue on any browser in iOS (all browsers on iOS are basically wrappers for Safari), and OSX Safari.
The issue is this (from my understanding):
At some point in the history of WebGL, there were restrictions on cross-origin content (videos, images, etc). I can't find a source for this, but I remember reading it somewhere, so this might not be 100% accurate.
Recently (a couple years ago? 2015?) all major browsers came to the conclusion that cross-origin media for use in WebGL was safe. Except Apple/Safari.
For most browsers, the crossorigin attribute on a <video> element could signal that this content came from another source. In Safari, for whatever reason, this attribute is ignored or not implemented. In fact, it looks like WebKit, which Safari is based on, fixed this as far back as 2015, but Apple still does not implement it. Even Apple refuses to comment on any progress.
Possible workarounds:
WebGL on Safari works with progressive (not a stream like HLS/Dash) .mp4 videos. Check out any 360 video on Facebook (website, not app) in iOS/Safari, and you'll note the source is an .mp4.
Use HLS (or Dash), but play the video flat, without WebGL. Check out any 360 video on YouTube (website, not app), and I think they are using HLS or Dash, but the point is they stream the video, whereas Facebook doesn't.
Here's a good starting point to the real issue: link.
Here's another detailed thread: link.
https://github.com/video-dev/hls.js#compatibility
Please note: iOS Safari "Mobile" does not support the MediaSource API.
Safari browsers have however built-in HLS support through the plain
video "tag" source URL. See the example above (Getting Started) to run
appropriate feature detection and choose between using Hls.js or
natively built-in HLS support.
When a platform has neither MediaSource nor native HLS support, you
will not be able to play HLS.
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js#canary"></script> -->
<video id="video"></video>
<script>
var video = document.getElementById('video');
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener('loadedmetadata', function() {
video.play();
});
}
</script>

Why YouTube videos are allowed to be played while flash stuff is forbidden on iOS?

As far as I know, flash is not supported on iOS. However, it's still possible to watch YouTube videos and they are base on flash. Is there some logic embedded into webView like:
if ([url containsDomain:#"youtube.com"]) {
returns YES;
} else {
return NO;
}
As far as I know, most of those YouTube video libraries for iOS apps use webView and loads video into iFrame. Then why and how it works?
See the YouTube iFrame Player API Docs:
Note: YouTube <object> embeds were deprecated on January 27, 2015. Please migrate your applications to the <iframe> embeds, which can intelligently use whichever embedded player – HTML (<video>) or Flash (<object>) – the client supports.
The HTML5 player will load on all devices where supported. If the HTML5 player can't be loaded for whatever reason (see Are there still any remains of Flash on YouTube for Chrome?), the player will return an error to the client.

JavaFX project play youtube videos

I work on an automatically music player. To be short, i use the Last.fm api to get a lot of tracks names and tags. Using these tags and some intelligence computing algorithms, once you play a track, the player sets another track (with tags very appropriate to the tags of the track listened before).
I used the youtube API to search for the URL's of the movies, and I managed to make it work. Now I want to make the videos play on my music player. I have tried to place the youtube player on WebView. It works, but not as intended. I want to control that player. I want it to start playing automatically, and I want to get noticed when the video ended so I can start the next one.
Any clues of what should I do to play the videos from youtube based on the search that uses the Youtube API, and to have control over the youtube player that I place on my GUI(make it play and stop from command line)? Or is there any possible way do download the youtube movie and play it using the JavaFX API? I searched google and noticed I cannot download youtube movie into a format that can be played by JavaFX api.
Update Dec 4th, 2015
Some versions of JavaFX 8 are unable to play back youtube video content. Currently, for instance, Java 8u66 cannot playback youtube video content, but Java 8u72 early access release can.
Also note some of the videos referenced in the sample solution are no longer available or are protected from play in embedded video players. So ensure that you perform any tests using available and videos that have not been distribution restricted. Refer to the youtube documentation for information on distribution restriction if need be.
Any clues of what should I do to play the videos from youtube
As a hints to get you started, see code playing YouTube videos in JavaFX and the YouTube HTML5 api.
Here is the sample code I linked running and playing YouTube videos back within a JavaFX WebView with some (very minimal) control over the video playback via interaction with a JavaFX "New Song" button.
Or is there any possible way do download the youtube movie and play it using the JavaFX API? I searched google and noticed I cannot download youtube movie into a format that can be played by JavaFX api.
I think such a usage would violate YouTube's terms of service. I believe YouTube requires you to play the video back using the YouTube video player (let's them insert ads in the video player etc).
5.1 A
you agree not to distribute any part of or parts of the Website or the
Service, including but not limited to any Content, in any medium
without YouTube's prior written authorisation, unless YouTube makes
available the means for such distribution through functionality
offered by the Service (such as the YouTube Player);
5.1 C
you agree not to access Content through any technology
or means other than the video playback pages of the Website itself,
the YouTube Player, or such other means as YouTube may explicitly
designate for this purpose;
I advanced little, but I got stuck to other problems.
First of all, the code from jewelsea was great. Now I could embed the player into a secondary window of my player and it shows the movie based on the URL that i got using the youtube api. But it looks like JavaFX cannot show most of the movies. It shows me the youtube player and an error message saying that I need to install latest version of Adobe Flashplayer. From my research, I noticed that the webView can only show movies with quality set at 240p, not higher.
I have searched a lot on Google how to make my webView to play the 240p quality video. First of all, i tried to set the youtube query parameters (https://developers.google.com/youtube/2.0/developers_guide_protocol_api_query_parameters#formatsp). I tried all the parameters from there: 1,5 and 6. But yet, I did not get the URL of movie with format that can be viewed on the webView of the JavaFX.
I also tried to embed the video quality in the URL of the movie like this:
http:/www.youtube.com/watch?v=og2YZlLhjKs&vq=small:240p ; but it does not work at all. I also wrote that URL in the browser and it looks like the youtube automatically sets the video to the highest quality, no matter what parameter I write in the URL.
The youtube api code that I used is the same like in this webpage: http://www.javacodegeeks.com/2010/05/getting-started-with-youtube-java-api.html
I just moved the main class code to a method that returns the URL of the first video that is in the list, and I changed the " query.setOrderBy(YouTubeQuery.OrderBy.VIEW_COUNT); "
to " query.setOrderBy(YouTubeQuery.OrderBy.RELEVANCE);". And this works fine, it shows the url to proper music videos that I search.
I am sorry for not showing the code of my project but it is big and it contains 2-3 api keys, and if you tell me how to change the video URL http:/www.youtube.com/watch?v=og2YZlLhjKs to work on the code from this website: https:/gist.github.com/jewelsea/1437374 , then I will know that to do to make it work on my project as well;
And the thing about YouTube playback API also enlightened me. I see that API has a lot of functions that could help me to play a lot easier with the video content (make it play, make it stop) but the problem is that I do not have knowledge about javascript programming and it is very sad that I do not have those methods in Java API as well. Maybe I will give it a try and insert javascript code into my webview. But, if I edit the webview using javascript... Is it going to play higher quality movies on the JavaFX webView?

YouTube iframe API seekTo does not work on iOS 6 / iPad 3

See http://jsfiddle.net/rCGSB/4/.
Using the seekTo method from the YouTube iframe api does not work in mobile Safari under iOS 6 using an iPad 3.
The video just starts playing at the beginning. Once the video is playing, the seekTo method works. However, as stated in https://developers.google.com/youtube/iframe_api_reference#Playback_controls for the seekTo method:
"Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (playing, video cued, etc.), the player will play the video."
So, the video should start playing at the specified time even if it's not playing. And since I am interacting with a click, the disabled autoplay under mobile Safari should not be the problem.
It works fine on all desktop browsers I tested (FF, Safari, Chrome under Mac OS).
Does this work at all under iOS? Feel free to edit and update the fiddle.
Being able to playback from a certain point in time in a YouTube video is something I've been interested in for a long time.
I've found that this bit of iframe-based markup works, at least on iOS 6:
<iframe width="480" height="270" src="http://www.youtube.com/embed/n1-OKPmQyh4?fs=1&feature=oembed&start=533" frameborder="0" allowfullscreen="1"></iframe>
The trick is the "start" parameter in the URL you're using for the iframe
I've also wanted the "autoplay" parameter to work, but from my understanding Apple prevents that from happening so as to avoid excess data charges for users viewing web content.

Embed Youtube videos in Metro style application

I am writing application to show youtube videos.
In WPF on windows 7 I use WebBrowser control and it works fine. But when I use WinRT WebView control to show swf file from youtube - it doesn't work. Only clear white screen.
I use approach like that : http://blog.tedd.no/2010/06/27/embedding-youtube-in-wpf-webbrowser-control/
What shall I do to have an oppotunity to show videos in Metro Style Application?
Thank you
try this one from the mytoolkit library: http://mytoolkit.codeplex.com/wikipage?title=YouTube
The default youtube video player (unless the user has opted into the HTML5 preview) is a Flash video control. Flash is not supported in the Windows Application Store ("Metro") shell version of IE, or in the WebView control.
But what you can do is request youtube to use the HTML5 video player (HTML5 video is supported by the App Store version of IE and WebView). For example, this video does play properly for me:
<WebView Source="http://www.youtube.com/watch?v=cTl3U6aSd2w&html5=True" />
So you should be able to embed a video using a webview, you just have to force the webview to use the HTML5 viewer. This can also be done as a parameter to the embed URL: see Force HTML5 youtube video
However, this setting only says to prefer the HTML5 player. Youtube may still attempt to use the flash player on some videos, which will not work in all cases.
You can alternatively also play the video through "mediaelement" to play youtube video, though you'd have to parse the youtube video stream first. See my W8 app "RedditTV"

Resources