I would like to build an iOS app that plays youtube videos within a UIWebView window, with the UIWebView window being user selected to either play directly on the iOS device, or via AirPlay onto an AppleTV.
The website displayed in the UIWebView is my own website and will have javascript that will signal back-and-forth to the app when the youtube video ends (using the iframe api for youtube).
Question: Is the above possible?
Specifically, the iOS docs show that I need to have in the html within the UIWebView:
<video src="myPlaylist.m3u8"
height="300" width="400"
x-webkit-airplay="allow" >
<embed airplay="allow"
src="movie.mov"
width=400
height=300
mime-type="video/quicktime">
</embed>
</video>
But with YouTube iFrame api I do not have access to the < video > tag so how do I make the AirPlay icon visible to the user on the UIWebView window?
Thank you for any direction anyone can provide.
Jim
UIWebView uses it's own movie player controller to play embedded videos. It offers a setting to allow AirPlay:
[_webView setMediaPlaybackAllowsAirPlay:YES];
When set to YES, you'll get the familiar AirPlay icon when the movie plays.
Related
I have UIWebview contain video in the html ,I need to detect the first video in the html and play it.
Is there any trick in javascript or objective c to Autoplay the video when page finish loading ?
If the embedded video is not from Youtube, you must set your UIWebView to allow media playback without user action.
This can be done by setting the mediaPlaybackRequiresUserAction property of your UIWebView to false.
Example: self.webView.mediaPlaybackRequiresUserAction = NO;
If you've embedded a YouTube video, you can simply append &autoplay=1 to the end of the video url.
This will cause the video to autoplay on page load.
Click on inline Playback in storyboard
I'm trying to get a Youtube video to play automatically when a user clicks this link:
<a class="videoLink" href="//www.youtube.com/watch?v=CBg_G-_zOf0&rel=0&autoplay=1" rel="lightbox"></a>
This opens and displays the video in a lightbox (I am using SwipeBox) but does not autoplay the video.
The '&rel=0' works fine, no suggested videos are shown after the video (it will not work if I use '?rel=0'). But the '&autoplay=1' does not work at all. I have tried using '?autoplay=1' but that gives me a JSON error (something to do with having multiple "?'s" in the URL).
This is the code of the YouTube video when it is open within the lightbox:
<iframe width="560" height="315" src="//www.youtube.com/embed/CBg_G-_zOf0?rel=0&autoplay=0" frameborder="0" allowfullscreen=""></iframe>
As you can see, the 'autoplay' is set to '0' which is no good. If I change the value to '1' in developer tools the video refreshes and automatically plays as expected.
Any suggestions on how I could possibly force the autoplay value in the iframe to be 1 would be awesome.
I am working on a project in which I want to play different types of news channels live on my website
Here is my code in which I am trying to play the channels
<div class="video_box">
<iframe id="example_video_1"
class="video-js vjs-default-skin"
controls preload="none"
width="562"
height="370"
poster="images/movie_clip.png"
data-setup="{}"
src="link to the live streaming channel">
</iframe>
</div>
Now the problem is when I put the src of the channel in my iframe src tag it gives error and channel does not play.
I have tried to play the channel on the same player as it is playing on the channel website but still didnt get the result.
Any Help?
You should copy the embedded source code from the channel iframe link given on the channel websites. Different website will just also provide the iframe link for the news channel to be displayed on your site. Just copy that iframe code and paste it on your website install the player on your site page and run the page the channel will start streaming on your page.
first of all are you copying the embedded source code or just the channel iframe link..???
there is difference between two for eg: to run youtube vedio directly on your side you need to copy embedded source code which is available on youtube share button and then click embedded and u will get iframe embedded source code. similar goes for news channels check this link might help you
A YouTube iframe can play a video using an HTML5 player instead of Flash, by adding "html5=1" as a URL parameter. However, this only works sometimes. For example the emebeds below are identical, except for the YouTube id in the iframe URL. The first iframe plays fine if there is no Flash player installed but the second requires flash. I've tried this in both Chrome and Firefox.
<iframe title="YouTube video player" width="720" height="720" src="http://www.youtube.com/embed/O_ceIIJeVNQ?html5=1&modestbranding=1&controls=0&title&loop=1&playlist=O_ceIIJeVNQ&enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A8080"></iframe>
<iframe title="YouTube video player" width="720" height="720" src="http://www.youtube.com/embed/YmehSeNXXt4?html5=1&modestbranding=1&controls=0&title&loop=1&playlist=YmehSeNXXt4&enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A8080"></iframe>
http://jsfiddle.net/judeosborn/2SAas
Any idea how I can get embeds to play in HTML5 consistently?
#Jude Osborn
"Apparently HTML5 video will not play for videos with ads, captions, or annotations"
That is impossible, the biggest part of youtube videos will have ads captions or notations
if it was true Youtube would be dead soon.
The fact that one video will play and the other not
is probably caused by if a version exists that is available
in the right format...which might depend on how old it is.
They dont convert videos on the fly..but create various versions
and send the right one to the right browser or device.
It should be that the new(er) embed code as shown below videos #Youtube
takes care of sending the right video to you.
By the way NONE of the PLAYLISTS will play anymore on iOS (iPad/iPhone)
i noticed that today, no replies are given in any yt-forum
Single videos play fine.
A colleague of mine found the answer in the original HTML5 video post announcement here:
http://youtube-global.blogspot.co.uk/2010/01/introducing-youtube-html5-supported.html
Apparently HTML5 video will not play for videos with ads, captions, or annotations.
I am building a site where I have several <video> elements (looped animations) that act as part of my design (not as an actual video). This works quite well in desktop browsers, yet I am in trouble on mobile devices.When I display the site on Android or iOS devices (ie. mobile webkit) I will get the OS's video player appearance and the videos will open in some sort of popup when I click them. I do know that I can bypass the autoplay restrictions by doing sth like:
window.onload = function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
};
But this will again open the video(s) in a seperate window...
Does anyone know of a possibility to emulate / enable desktop-like behavior on mobile devices? Thanks!
EDIT:
Markup is basic <video>-syntax btw:
<video autoplay loop>
<source src="vid.mp4" type="video/mp4" />
<source src="vid.ogg" type="video/ogg" />
<source src="vid.webm" type="video/webm" />
</video>
Hmm, I'm not sure about Android but iOS devices can't run multiple video streams simultaneously:
Multiple Simultaneous Audio or Video Streams
Currently, all devices running iOS are limited to playback of a single
audio or video stream at any time. Playing more than one video—side by
side, partly overlapping, or completely overlaid—is not currently
supported on iOS devices. Playing multiple simultaneous audio streams
is also not supported. You can change the audio or video source
dynamically, however. See “Replacing a Media Source Sequentially” for
details.
No, Android or iOS devices (ie. mobile webkit) are not able to run video as you are wanting . Video will open in a default video player of device.
YouTube uses a mov or mp4 with ios to load the native look and feel for videos, or it links out to their app to play the video since it's installed on every ios device.
Why do you need windows.onload to bypass autoplay? If I remember correctly setting the preload tag to none
<video src="vid.mov" preload=”none”></video>
should work.
Also, have you tried using the Video For Everybody approach? With that should be able to get the video to play in the web page rather than by the phone's OS, that way I believe you can achieve the same effect on supported devices.
EDIT: In regards to j08691's answer, an alternative approach for iPhones could be to design a simple web viewer app for the site for iPhone which has a workaround for the no-multiple video playing problem.