iOS: embeded Youtube video in Webview inside UITableViewCell not playing - ios

When my WebView is inside a normal UIView every thing works and video plays as expected. (I created a new sample project to test it.)
But when I put the WebView inside a UITableView. Its not playing. It loads the video player with video's thumbnail and big red play button. When I click play button, video won't play. The WebView goes black.
Here's my code
void LoadVideo (string videoId)
{
nfloat width = UIScreen.MainScreen.Bounds.Size.Width - 32;
nfloat height = VideoWebview.Frame.Size.Height;
string embedHtml = "<iframe width=\"{0}\" height=\"{1}\" src=\"https://www.youtube.com/embed/{2}?modestbranding=1&showinfo=0\" frameborder=\"0\" style=\"margin:-8px;padding:0;\" allowfullscreen></iframe>";
string html = string.Format (embedHtml, width, height, videoId);
Console.WriteLine (html);
VideoWebview.ScrollView.Bounces = false;
VideoWebview.LoadHtmlString (html, new Foundation.NSUrl ("https://www.youtube.com"));
}
This works fine when the WebView is not inside a UITableViewCell. What am I doing wrong here? Any help is appreciated.
Edit:
I've found that it's some issue with my project. I created a new sample project and its working inside a UITableViewCell. But in the current project that I'm working it just don't work... not in UITableViewCell, not in UIView.

Related

YTPlayerView controls settings don't affect fullscreen mode

I'm trying to play a youtube video in my iOS app using "YTPlayerView".
My aim is to play video in fullscreen, don't show any controls, and close it on the first tap to the screen.
If I play video inline, everything works properly, but in fullscreen control-bars appear. However, if I close fullscreen with its button (on the bottom right), controls disappear.
var playerVars = [AnyHashable : Any]()
playerVars["enablejsapi"] = 1
playerVars["rel"] = 0
playerVars["fs"] = 0
playerVars["controls"] = 0
playerVars["iv_load_policy"] = 3
playerVars["modestbranding"] = 1
playerVars["playsinline"] = 0
playerVars["showinfo"] = 0
self.playerView.load(withVideoId: videoId, playerVars: playerVars)
Any help will be very appreciated to solve this issue.
Image about full screen with control-bars
"rel" and "info" depricated. Try this -
"playsinline"
This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Valid values are:
0: This value causes fullscreen playback. This is currently the default value, though the default is subject to change.
1: This value causes inline playback for UIWebViews created with the allowsInlineMediaPlayback property set to TRUE.

YouTube embedded video displaying wrong size

I have embedded a youtube video in a UIWebView for display in my app.
Here's the code for that:
func loadVideo(){
if let youtubeCode = exerciseYoutubeCode {
guard !youtubeCode.isEmpty else { return }
exerciseVideoWebView.isHidden = false
exerciseVideoWebView.allowsInlineMediaPlayback = true
exerciseVideoWebView.scrollView.isScrollEnabled = false
exerciseVideoWebView.scrollView.bounces = false
exerciseVideoWebView.loadHTMLString("<html><head><style>body{margin:0px}</style></head><body><iframe width=\"\(exerciseVideoWebView.frame.width)\" height=\"\(exerciseVideoWebView.frame.height)\" src=\"https://www.youtube.com/embed/\(youtubeCode)?&playsinline=1\" frameborder=\"0\" allowfullscreen></iframe></body></html>",
baseURL: nil)
}
}
The problem is that the embedded video does not seem to be respecting the width and height of the UIWebView that I am passing in to the iframe. In the simulator, the video is roughly 15-25 pixels larger than the UIWebView. I can live with that, but when running on a physical device, it's rendering 15-25 pixels smaller than the UIWebView, exposing the white of the HTML page on the right and bottom sides of the UIWebView.
The UIWebView has an AutoConstraint to a 16:9 ratio, which matches YouTube's video aspect ratio.
If I put the following script into the HTML, I can see that the width and height of the video iframe is an exact match to the height and width printed to the console for the UIWebView:
<script>setTimeout(function(){
alert(document.getElementsByTagName('iframe')[0].offsetWidth + ' ' + document.getElementsByTagName('iframe')[0].offsetHeight)},10000)
</script>
Clearly there is some sort of scaling happening if the HTML thinks its the same size as the UIWebView, but I can't figure out how to fix it.

How to get HTML5 video thumbnail without using poster on safari or iOS?

I have embedded HTML5 video with mp4 format. How to get thumbnail image like poster without using "poster" attribute. This problem coming on Safari and iOS. I have added video like below mentioned code.
<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>
On Chrome, IE, Firefox first frame of video coming as thumbnail image, but not coming on Safari and iOS.
simply add preload="metadata" in video tag and set #t=0.1 at url src, it will get the frame of 0.1s of your video as thumbnail
however, the disadvantage of this solution is when you click to play the video, it always start at 0.1s
<video preload="metadata" controls>
<source src="video.mp4#t=0.1" type="video/mp4">
</video>
If you want to do this without storing server side images it is possible, though a bit clunky... uses a canvas to record the first frame of the video and then overlay that over the video element. It may be possible to use the URL for the Canvas as a source for the Poster (eg video.poster = c.toDataURL();) but that requires correct CORS setup (not sure if the video was on your own server, and if you have control over that, so took the safest option). This will work best if video is correctly encoded for streaming (so MOOV atom is at the front of the video, otherwise it will be slow to draw the overlay - see this answer for more detail)
The HEAD contains styling for the video and the overlay (you will need to adjust sizing and position to suit your application)
<head>
<style>
video_box{
float:left;
}
#video_overlays {
position:absolute;
float:left;
width:640px;
min-height:264px;
background-color: #000000;
z-index:300000;
}
</style>
</head>
In the BODY you will need the div for the overlay and the video. The overlay div has an onclick handler to hide the overlay and start the video playing
<div id="video_box">
<div id="video_overlays" onclick="this.style.display='none';document.getElementById('video').play()"></div>
<video id="video" controls width="640" height="264">
<source src="BigBuck.mp4" type='video/mp4'>
</video>
</div>
</div>
Finally you will need code that will load the video, seek to the first frame and load the visual into a canvas that you then insert into the overlay
<script>
function generateOverlay() {
video.removeEventListener('seeked',generateOverlay); / tidy up the event handler so it doesn't redraw the overlay every time the user manually seeks the video
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
c.width = 640;
c.height = 264;
ctx.drawImage(video, 0, 0, 640, 264); // take the content of the video frame and place in canvas
overlay.appendChild(c); // insert canvas into the overlay div
}
// identify the video and the overlay
var video = document.getElementById("video");
var overlay = document.getElementById("video_overlays");
// add a handler that when the metadata for the video is loaded it then seeks to the first frame
video.addEventListener('loadeddata', function() {
this.currentTime = 0;
}, false);
// add a handler that when correctly seeked, it generated the overlay
video.addEventListener('seeked', function() {
// now video has seeked and current frames will show
// at the time as we expect
generateOverlay();
}, false);
// load the video, which will trigger the event handlers in turn
video.load();
</script>
this is a bit late but we had the same scenario. I can't use the attribute 'muted' because my videos are podcasts. This is what I came up with and I hope to share it with future visitors. What I did is load the video in the body tag, drew a canvas, retrieved as base64 and applied to the video as the background image.
Since my video should be fixed 150px in height, I computed the aspect ratio so that whatever height and width of the actual video, it will be resized into 150px height and dynamic width.
$('body').append('<video class="checkmeload" style="position:absolute;top:-10000px" controls preload="auto" playsinline src="//src-here"><source src="//src-here" type="//videotype-here"></video>');
$('body').find('.checkmeload').on('loadeddata', function(){
var video = $('.checkmeload');
var canvas = document.createElement('canvas');
aspectratio = (video[0].videoWidth / video[0].videoHeight);
newwidth = (150 * aspectratio);
canvas.width = newwidth;
canvas.height = 150;
var context = canvas.getContext('2d');
context.drawImage(video[0], 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');
$('body').find('.checkmeload').remove();
$('#myvideo').css('background-image','url("'+dataURI +'")');
});
Source: How to set the thumbnail image on HTML5 video?
This worked for me:
<img src="thumbnail.png" alt="thumbnail" />
/* code for the video goes here */
Now using jQuery play the video and hide the image as
$("img").on("click", function() {
$(this).hide();
// play the video now..
})
Add #t=0.001 at the end of the video URL.
https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/

Load image from solution in WebView Xamarin Forms

I have inside ScrollView images and i want selected image opened in some new page and have pinch and zoom , i try webview control but i cant load image from my solution path .
void loadhtml()
{
var htmlSource = new HtmlWebViewSource {
Html = "<!DOCTYPE html>\n<html>\n<body>\n<img src=\"myproject.Images.test.jpg\">\n</body>\n</html>"
};
MyWebView.Source = htmlSource;
}
Can i load image from path where is inside my app in WebView ? Another method for pinch and zoom ?
Thanks.
You can in fact load content that is bundled into you app with the Xamarin.Forms WebView. See this link: https://developer.xamarin.com/guides/cross-platform/xamarin-forms/user-interface/webview/
I hope that helps!

Load image on UIWebView and scale it correctly

I load an local image (tif) on to the UIWebView:
string fileName = "image.tif";
string localDocUrl = Path.Combine (NSBundle.MainBundle.BundlePath, fileName);
webView.LoadRequest(new NSUrlRequest(new NSUrl(localDocUrl, false)));
webView.ScalesPageToFit = true;
The image is bigger than the UIWebView.
Now I want that the image fits in the web view. How can I do this?
i am unable to give comment due to too less comment as i am a new user.
Plz goto nib file and check "Sceling" as "Scale page to fit"
Hope it will work
I'm not sure if this applies directly to a picture, but I had issues trying to get a webview to show correctly on the screen. This is the code that I used and hopefully it can work for you.
var webview = new UIWebView(this.View.Frame);
webview.LoadRequest(new NSUrlRequest(new NSUrl(myCustomUrl)));
this.NavigationController.PushViewController(
new UIViewController() { webview }, true);
Maybe setting the frame will help?

Resources