Im working on jquerymobile app, where I have a few videos from youtube.
To play videos I am using video.js html5 player with youtube plugin.
When video is playing I have some video description showing in the header, which works fine.
The problem Im having is when activating fullscreen mode on the player, video resize fullscreen and header disappears which is not what I want.
I would like to keep header visible even if video is on fullscreen.
I tried to use data-fullscreen attribute, adjust z-index of header but nothing works - header disappears on fullscreen.
Is there any way to keep header always visible on fullscreen?
I created simple demo here http://jsfiddle.net/machumba/ewbpy5s7/2/
<iframe
width="100%"
height="300"
src="http://jsfiddle.net/machumba/ewbpy5s7/2/embedded/"
allowfullscreen="allowfullscreen"
frameborder="0">
</iframe>
Related
My iOS application uses youtube iframe player on UIWebView to play any clip with inline mode. The following code is HTML code used.
<html>
<head>
<style type="text/css">body {background-color: transparent;color: white;}</style>
</head>
<body style="margin:0">
<iframe src="http://www.youtube.com/embed/e2w8z6mI47U?playsinline=1&rel=0&showinfo=0" width="320" height="240" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Then, it is passed to loadHTMLString method.
That code had worked well until a recent date. But, I recently noticed that every clips I used aren't played normally. the standby view and play button is shown but, although I pushed the play button, it didn't play well. black screen was only shown.
I haven't found anything to solve the problem. Are there any changes of Youtube Iframe player or points I missed?
I ended up solving the problem by calling [videoView setMediaPlaybackRequiresUserAction:NO].
I don't exactly know why the method could save me. At a guess, there was a change dealing with the request for playing at youtube. I could find the following changes on youtube developer site.
January 28, 2014
The playsinline parameter controls whether videos play inline or
fullscreen in an HTML5 player on iOS. Setting the value to 1 causes
inline playback.
The Selecting content to play section has been updated to explain how
to find YouTube video IDs and playlist IDs using the YouTube Data API
(v3) rather than the older API version.
The controls parameter's definition has been updated to reflect the
fact that the parameter value only affects the time that the Flash
player actually loads in IFrame embeds. In addition, for IFrame
embeds, the parameter value also determines when the controls display
in the player. If you set the parameter's value to 2, then the
controls display and the Flash player loads after the user initiates
the video playback.
I guess that one of above changes may need extra informations which are passed from a client to youtube server for playing normally.
UPDATE:
Today, I identified that it works well without my solution. It seems that the problem was fixed lately.
My requirement is I do not want to show the video playing in full screen.
For that initially, I choose the MPMoviePlayerController. By using this static videos i.e, which is in our app are playing well but the YouTube videos i.e., contains URL are not playing, instead of that it shows blank screen.
I tried in these ways:- http://pastie.org/8484597 You may think that all the ways are same.. But I tried all the ways as I googled I got these are all the ways.
Later, I moved to UIWebView. Yes, it is absolutely good.. it is playing my videos with No Doubt. Here I am extracting the youtube id and playing. But here, I do not want to play the video in full view. But when I want to play the video we have to click on the UIWebView then instantly it is showing full screen with video playing. But, I want to play with in the web view only.
I followed this link but same problem.. Display video inside the Uiwebview not in device full screen
I tried in these ways.. http://pastie.org/8484621
(I used LBYouTubeExtractor also. it plays good but it is not playing all the videos. For some videos it throws _itemFailedToPlayToEnd error).
Please guide me how to do in UIWebView?.
Wrap the video within a html file and remember to add webkit-playsinline and change the webview attribute webview.allowsInlineMediaPlayback =YES; Then load the html file with the webview. This works for me.
The html file is like
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video
webkit-playsinline
src="prog_index.m3u8"
height="200" width="200"
type="video/m3u8"
>
</video>
</body>
</html>
Cheers!
I am creating a mobile web site and would like to show a small (88px by 50px) YouTube thumbnail that, when clicked, plays the video in fullscreen and returns them to the webpage. It should work in iOS and Android.
My first approach was to use <a href="http://youtube.com/watch?v=oHg5SJYRHA0>...</a>. However, on iOS, the user is redirected to the YouTube app, and they must manually navigate back to Safari.
Next, I tried embedding a small iframe player with
<iframe id="ytplayer" type="text/html" src="http://www.youtube.com/embed/T0WepLbWyq0?autoplay=1&controls=0&modestbranding=1&showinfo=0&rel=0" frameborder="0" allowfullscreen width=88 height=50></iframe>
This correctly pops up a fullscreen video with a "Done" button on iOS that brings the user back to the Safari page. However, the resulting thumbnail is dominated by a large, red "Play" button.
Is there a way to hide the red Play button on an embedded video?
Or is there another way to embed a small YouTube thumbnail on a web page that allows users to return to the page when viewing is finished?
Currently, I'm considering a) Trying to hide the ugly red Play button with an overlay that allows clicks to pass through, or b) Trying to get a direct link to the YouTube video file, since linking directly to a video file allows the user to return to the browser when finished.
However, these hacks seem complicated and brittle. Is there a better way?
Thanks!
Is there some way to get rid of the giant uiwebview video play button whenever it detects a video. I just want to show a screen of a video without the play button in the way.
Thanks,
If you use the HTML5 video tag then appearance of controls is specified as an attibute i.e.
no controls
<video src="sample_mpeg4.mp4"></video>
all controls
<video src="sample_mpeg4.mp4" controls></video>
just one control
<video src="sample_mpeg4.mp4" controls="Volume"></video>
P.S.
If you want the video to play inline within the UIWebView there are things you need to do within the HTML itself and also within the UIWebView implementation, I can add this info if required.
Is it possible to have a YouTube video played on a web page in Safari on the iPhone, and have the 'done' button and 'video finished' event send the user back to the mobile web page they came from?
Currently, it seems like i'm only able to direct them to YouTube.app to view the video ... but they then remain in YouTube.app and are presented with the videos comments and other such information, and I do not wish to display this information.
If this is possible, please provide a link to a site with documentation/examples or an example in your response.
Thanks.
Use YouTube's new IFRAME-based embed code (I believe they give it to you by default now when you click their embed button...?) and on an iPhone, it will be rendered as an HTML5 video if possible.
When users tap the play icon on it, it will launch the standard video viewer, not the YouTube app. When they exit the video, they'll be back on your webpage.
The new embed code looks like this:
<iframe
title="YouTube video player"
width="480"
height="390"
src="http://www.youtube.com/embed/VIDEO-ID"
frameborder="0"
allowfullscreen>
</iframe>
This is more or less what they do in the new YouTube webapp, except that they don't need the IFRAME (they just do the HTML5 embed on their own page).