I'm trying to play youtube video on my android app using Youtube Player API for Android but the problem is getting that the video quality of the video is not so good and there is not an option for force setting it to HD. So I tried to play video using Youtube Iframe API in android Webview but also there I'm facing the same problem with video quality.
Iframe Code :
<div class="videowrapper">
<iframe id=\"player\" width=\"720\" height=\"1280\" frameborder=\"0\" allow=\"encrypted-media\" src=\"https://www.youtube.com/embed/uFExenM7-dY?vq=hd720&enablejsapi=1&controls=0&iv_load_policy=3&modestbranding=0&rel=0&showinfo=0\"></iframe>\n"
</div>
.videowrapper {
float: none;
clear: both;
background:#eeeeee;
width: 100%;
}
.videowrapper iframe {
position: absolute;
width: 100%;
height: 100%;
}
How to make Youtube video to always play in HD quality?
Try attaching the vq=VIDEO_QUALITY to a youtube video url like
https://www.youtube.com/watch?v=nzliFQ-36kg&vq=720
To make this work using embed, follow the answer in this SO post.
<object width="1280" height="720"><param name="movie" value="//www.youtube.com/v/VIDEO_ID?hl=en_US&version=3&rel=0&vq=hd720"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
Testing on JSFiddle.
Don't forget to change VIDEO_ID to valid one when testing this.
Related
I have a very basic WebActivity that serves up a page that has the styling of
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Next, edit add some HTML around your embed code.
HTML
<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/xxxxxx" frameborder="0" allowfullscreen</iframe</div>
If I view this page with the browser on the device, the page loads and the video plays just fine.
However if I use a webview programmed into my app, and load the page,clicking on the like, I get a message on the youtube video window (after the loading spinner) of "An error occurred. Please try again later (Playback ID: xxxxxx) Learn More"
of which learn more does not display anything useful. Idea's on how to go about seeing what is going on? The Android Studio logcat is not displaying any issues?
so it turns out that there are a few more params needed to play embeded iframe videos from YouTube.
Had to add the following to the end of the url string
src="https://www.youtube.com/embed/xxxxxxxxx?version=3&enablejsapi=1"
I have create a demo for it. You may visit my github link
I'm trying to put a little embedded youtube video in my app. The user needs to be able to fullscreen the video, but the webview's youtube player has no fullscreen button! Whhhaa…? I've searched around and found no solution. BTW, using the Google YouTube API is NOT an option. I have a workaround (video thumbnail which opens a fullscreen WebView when clicked), but it would be a lot simpler/more elegant if the webview would handle this for me.
Here's how I'm loading the youtube video
String htmlString = "<html><body style='margin:0px auto; padding:0px; width: 100%;'><script type='text/javascript' src='http://m.youtube.com/iframe_api'></script><div style=\"padding-bottom: 56.25%;position: relative;\"><iframe allowfullscreen='allowfullscreen' id='playerId' type='text/html' style=\"width: 100%; height: 100%; position: absolute;\" width=\"560\" height=\"315\" src='http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&rel=0&playsinline=0&autoplay=0' frameborder='0'></div></body></html>";
if (youtubeWebView == null){
youtubeWebView = ButterKnife.findById(view, R.id.youtubeWebview);
}
youtubeWebView.getSettings().setJavaScriptEnabled(true);
youtubeWebView.getSettings().setLoadWithOverviewMode(true);
youtubeWebView.loadData(htmlString, "text/html", null);
I dont know much about the webview, normally i'd use Mediaplayer and Mediacontroller to play video from url but my all videos are HD and some phone can give error or blackscreen while playing HD videos. So i decided to play video with embed code. Now i can play video with embed code but videos are not fluent. My other problem is i cant allow fullscreen. I think if i use iframe, i can allow, but i dont know how to use iframe in webview.
I want to learn, is it possible to avoid freezing in webview and how can i use iframe in webview, if you give example i will be much appreciate. Hope i could explain myself and you can help me.Thank in advance.
Here is my webview code :
public class EmbedActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_embed);
WebView mWebView = (WebView)findViewById(R.id.webView1);
WebSettings webSettings = mWebView.getSettings();
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
mWebView.loadUrl("http://www.example.com/wp-nuevo/player/embed.php?key=9935");
}
}
iframe
<iframe width="480" height="360" src="http://www.example.com/wp-nuevo/player/embed.php?key=11042" frameborder="0" allowfullscreen></iframe>
Hello may be i am late but I hope my answer help others
you can user responsive html as
<div style="position: relative;overflow: hidden;width: 100%;padding-top: 45.25%;">
<iframe style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;"
title="vimeo-player"
src="https://www.youtube.com/embed/tgbNymZ7vqY"
frameborder="0"
>
</iframe>
this will match width for screen width
how to user u need to convert this html to string like
const val iFrame = "<div style=\"position: relative;overflow: hidden;width: 100%;padding-top: 54%;\"> <iframe width=\"360\" height=\"338\" style=\"position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;\" title=\"vimeo-player\" src=\"https://www.youtube.com/embed/tgbNymZ7vqY" frameborder=\"0\" allowfullscreen> </iframe> </div>"
then load Data to WebView like
binding.webview.loadData(iFrame, "text/html", "utf-8");
To embed a playlist, I use the following HTML code:
<iframe src="http://www.youtube-nocookie.com/embed/videoseries?list=PLcld7bnZTdpiTel3p6QbXKIb5i5Wontd0&autoplay=1&iv_load_policy=3&hl=de_DE" width="1280" height="720" frameborder="0" allowfullscreen></iframe>
Unfortunately, there is no way to start e.g. by a specified video ID of the playlist. YouTube uses a parameter (for example &v=60MQ3AG1c8o) behind the playlist id to load e.g. the second video for sharing propose.
Is there a way, to load a specific video of the playlist. So the user is for example able to start directly with the second video and continue with the regular playlist.
If you have a better idea to present video playlists on web applications, please let me know.
The second question/issue I've got is, that it isn't possible on iOS or Android to play the youtube playlist in mobile browsers. Is there any known workaround, to make this possible for mobile devices?
Thank you.
We can replace videoseries with the video ID to start with, like 0-7IHOXkiV8:
<iframe src="http://www.youtube-nocookie.com/embed/0-7IHOXkiV8?list=PLcld7bnZTdpiTel3p6QbXKIb5i5Wontd0&autoplay=1&iv_load_policy=3&hl=de_DE" width="1280" height="720" frameborder="0" allowfullscreen></iframe>
It's possible to load a playlist and start at a specific position if you use the full YouTube Player API, instead of just an <iframe> tag. Here's an example (jsfiddle version):
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'videoseries',
events: {
onReady: loadPlaylist
}
});
}
function loadPlaylist() {
player.loadPlaylist({
list: "PLhBgTdAWkxeCMHYCQ0uuLyhydRJGDRNo5",
listType: "playlist",
index: 4
});
}
That should work, but it's not right now; I'm going to follow up with the YouTube Players engineering team about why it's not starting playback at the video with index 4.
This answer contains a copy of the fiddle from the other answer, as some can't open the link.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>
YT video player
</title>
<script src="https://www.youtube.com/iframe_api"></script>
<script type='text/javascript'>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'videoseries',
events: {
onReady: loadPlaylist
}
});
}
function loadPlaylist() {
player.loadPlaylist({
list: "PLhBgTdAWkxeCMHYCQ0uuLyhydRJGDRNo5",
listType: "playlist",
index: 4
});
}
</script>
</head>
<body>
<div id="player"></div>
</body>
</html>
Spent way too much time on this now, has anyone got video.js working on android?
I can't!! works fine on ios and browsers
code,
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="300" height="200"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'>
<source src="http://www.machupicchumobile.com/onlineApps/android/CPAforNewbies/1.mp4" type='video/mp4' />
<source src="http://www.machupicchumobile.com/onlineApps/android/CPAforNewbies/01CPANewbies_Intro_x264_1.webm" type='video/webm' />
<source src="http://www.machupicchumobile.com/onlineApps/android/CPAforNewbies/01CPANewbies_Intro_x264_1.ogv" type='video/ogg' />
</video>
Video.js works fine on Android - but because the video.js controls are now disabled on mobile by default it's less obvious that it's working if you're not using the API.
I removed embedded video playing in Android completely by running this script before the initiation of video-js. It just links to the video file, so it will be played by a native video player.
if (navigator.userAgent.match(/Android/i) != null || (navigator.userAgent.match(/Chrome/i) != null && navigator.userAgent.match(/Mobile/i) != null)) {
$('video').each(function() {
var src = $(this).find('source[type="video/webm"]').attr('src');
var poster = $(this).attr('poster');
$(this).replaceWith('<div class="not-video-js"><img src="'+poster+'" class="posterframe-fake"><div class="not-video-js-button" tabindex="0" style="position:absolute; top:50%; left: 50%;"><span style="margin: -50px 0 0 -50px; position:absolute; top:50%; left: 50%;"><img src="img/btn_video_play.png"></span></div></div>');
});
}
Yes, Video.js works perfectly on Android devices both on Web Browsers as well as on Hybrid Apps(Cordova). Was running through tests across devices(samsung,sony) and android versions for playing locally stored video(.mp4) file, found it working perfectly on Android 4.0.4+ onwards.
For Web Browsers testing used this link It also has source code incase you want to use it.
Note: For local files make sure you have correct path for video files as they differ on earlier versions of Android.