Forum Xamarin.Forms

How to play youtube video in webview using xamarin forms

praveenaHMpraveenaHM USMember ✭✭

Hi guys,
I'm facing issue in play the youtube video which is shown in the webview and binded html data to the webview. how to do it in xamarin forms.
Any help would be appreciated.
Thanks
praveen

Answers

  • LucasZhangLucasZhang Member, Xamarin Team Xamurai

    You can create a webview by using HTML Strings

    var browser = new WebView();
    var htmlSource = new HtmlWebViewSource();
    htmlSource.Html = @"<html><body>
    
    <video  webkit-playsinline="true" playsinline="true" preload="true"  src="video url" aria-label=""></video>
      </body></html>";
    browser.Source = htmlSource;
    

    Since version 9, iOS will only allow your application to communicate with servers that implement best-practice security by default. Values must be set in Info.plist to enable communication with insecure servers.

    in iOS project ->info.plist

    <key>NSAppTransportSecurity</key>
        <dict>
            <key>NSExceptionDomains</key>
            <dict>
                <key>your domain</key>
                <dict>
                    <key>NSIncludesSubdomains</key>
                    <true/>
                    <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                    <true/>
                    <key>NSTemporaryExceptionMinimumTLSVersion</key>
                    <string>TLSv1.1</string>
                </dict>
            </dict>
        </dict>
    
    </key>
    

    Refer https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/webview?tabs=macos#ios-and-ats

  • praveenaHMpraveenaHM USMember ✭✭
    edited June 2019

    @LuzasZhang,
    Thanks for your response. Actually html code like this in my application. Below HTML Code.
    This is html code coming from the server.
    <span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;">The last word in scale realism for the super detail fan and a flying aircraft for those who build and fly. Fly with included rubber power motor or convert to electric or gas engine. These balsa airplane kits contain Laser cut balsa parts, scale WWI plastic wheels, full set of decals and vacuum formed plastic parts.&nbsp;</span><span style="color: #333333; font-family: arial, helvetica, sans-serif;">Comes with a detailed plan and instruction sheet</span><span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;"><br /> <br /> Introduced over the western front in August 1917, the Fokker Triplane soon became the favorite plane of Germany’s greatest World War 1 ace, Baron Manfield von Richthofen. After scoring numerous aerial victories, von Richthofen was shot down in a triplane on April 21, 1918 by Captain Roy Brown of the R.A.F.&nbsp;</span><span style="color: #333333; font-family: arial, helvetica, sans-serif;">Comes with a detailed plan and instruction sheet</span><br /> <br /> <span style="font-family: arial, helvetica, sans-serif; color: #333333; font-size: 10pt; font-weight: bold;">Specification:</span><span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;"><br /> </span><span style="font-size: 13.3333px;">●&nbsp;</span><span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;">Wing Span: 508 mm<br /> </span><span style="font-size: 13.3333px;">●&nbsp;</span><span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;">Length: 394mm<br /> </span><span style="font-size: 13.3333px;">●&nbsp;</span><span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;">Scale: 1/16 <br /> </span><span style="font-size: 13.3333px;">●&nbsp;</span><span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;">For Ages 12 and up<br /> <br /> </span><br style="font-size: 13.3333px;" /> <span style="font-size: 13.3333px; font-weight: bold;">Package include:</span><br style="font-size: 13.3333px;" /> <span style="font-size: 13.3333px;">●&nbsp;Laser Cut balsa Wood&nbsp;<br style="font-size: 13.3333px;" /> ● Detailed construction 1:1 scale plan&nbsp;<br style="font-size: 13.3333px;" /> ● Propeller<br /> ●&nbsp;</span><span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;">Rubber band<br /> </span><span style="font-size: 13.3333px;">●&nbsp;</span><span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;">Cowl<br /> </span><span style="font-size: 13.3333px;">●&nbsp;</span><span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;">Japanese Tissue<br /> </span><span style="font-size: 13.3333px;">●&nbsp;</span><span style="font-family: arial,helvetica,sans-serif; color: #333333; font-size: 10pt;">Wheels and all other hardware to complete this scale kit&nbsp;<br /> <br /> Flight Video of Rc Converted model<br /> <iframe width="380" height="315" src="http://www.youtube.com/embed/hqv1D7y7lqA" frameborder="0" allowfullscreen=""></iframe></span>

    Please check the above html code. That code i readed from HtmlWebViewSource and binded to webview.
    But video is not appearing in normal webview, But customRenderere through it is visible. not able to play video.
    Thanks praveen

  • LucasZhangLucasZhang Member, Xamarin Team Xamurai

    Since your html code is very complex .I suggest that you can create a local html file . And check if it can display on webview .

Sign In or Register to comment.