Search This Blog

Saturday 13 July 2019

Xamarin Form Play Video In WebView









Xamarin Form Code
Create Xaml Page and add the following Code

PlayVideoWithWebView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestApp.PlayVideoWithWebView">
    <ContentPage.Content>
        <StackLayout  Margin="10,10,10,10">
            <Label Text="https://www.w3schools.com/html/mov_bbb.mp4" />
            <Button Text="Click Here to Play Video In Default Player" x:Name="btnPlayVideo" Clicked="BtnPlayVideo_Clicked" />
            <WebView  x:Name="webView"  ></WebView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>



PlayVideoWithWebView.xaml.cs


using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using TestApp.Services;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TestApp
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class PlayVideoWithWebView : INotifyPropertyChanged
    {
        public event EventHandler<PageOrientationEventArgs> OnOrientationChanged = (e, a) => { };
        private double _width = 0;
        private double _height = 0;
        public PlayVideoWithWebView ()
{
InitializeComponent ();
            OnOrientationChanged += DeviceRotated;
        }

      
        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);

            var oldWidth = _width;
            const double sizenotallocated = -1;

            base.OnSizeAllocated(width, height);
            if (Equals(_width, width) && Equals(_height, height)) return;

            _width = width;
            _height = height;

            // ignore if the previous height was size unallocated
            if (Equals(oldWidth, sizenotallocated)) return;

            // Has the device been rotated ?
            if (!Equals(width, oldWidth))
                OnOrientationChanged.Invoke(this, new PageOrientationEventArgs((width < height) ? PageOrientation.Vertical : PageOrientation.Horizontal));

        }

// called when the device orientation changed
        private void DeviceRotated(object sender, PageOrientationEventArgs e)
        {
            switch (e.Orientation)
            {
                case PageOrientation.Horizontal:
                    webView.HeightRequest = this._height;
                    webView.WidthRequest = this._width;
                    break;
                case PageOrientation.Vertical:
                    webView.HeightRequest = this._height / 2.5;
                    webView.WidthRequest = this._width;
                    break;
                default:
                    break;

            }
        }
        private void BtnPlayVideo_Clicked(object sender, EventArgs e)
        {
            webView.HeightRequest = this._height / 2.5;
            webView.WidthRequest = this._width;
            webView.Source = "https://www.w3schools.com/html/mov_bbb.mp4";
        }
    }

}


Create the PageOrientationEventArgs class for Handling Device Orientation.

PageOrientationEventArgs

using System;
using System.Collections.Generic;
using System.Text;
namespace TestApp.Services
{
    public class PageOrientationEventArgs : EventArgs
    {
        public PageOrientationEventArgs(PageOrientation orientation)
        {
            Orientation = orientation;
        }

        public PageOrientation Orientation { get; }
    }

    public enum PageOrientation
    {
        Horizontal = 0,
        Vertical = 1,
    }
}


No comments:

Post a Comment

Popular Posts