How to hide all the icons in the media player other than Play/Pause and Volume button?

judsonabrahamjudsonabraham USMember ✭✭✭

I have a media player in which I want to hide the aspect ratio, cast to device and full screen icon in media player. This is the screenshot of my media player in which I have marked the icon which I need to hide in red color.

So I have taken this media player from https://github.com/inthehand/InTheHand.Forms . This is the my Xaml code

<StackLayout>
        <Button Text="Stretch" Clicked="Button_Clicked"/>
        <forms1:MediaElement HorizontalOptions="Fill"  BackgroundColor="Green" VerticalOptions="Center" HeightRequest="180" x:Name="Media" IsLooping="True"   AreTransportControlsEnabled="true" Source="http://video.ch9.ms/ch9/334f/891b78a5-642d-40b4-8d02-ff40ffdd334f/LoginToLinkedinUSingXamarinAuth_mid.mp4"/>
    </StackLayout>

This is my media element code-

public sealed class MediaElement : View
    {
        /// <summary>
        /// Identifies the AreTransportControlsEnabled dependency property.
        /// </summary>
        public static readonly BindableProperty AreTransportControlsEnabledProperty =
          BindableProperty.Create(nameof(AreTransportControlsEnabled), typeof(bool), typeof(MediaElement), false);

        /// <summary>
        /// Identifies the AutoPlay dependency property.
        /// </summary>
        public static readonly BindableProperty AutoPlayProperty =
          BindableProperty.Create(nameof(AutoPlay), typeof(bool), typeof(MediaElement), true);

        /// <summary>
        /// Identifies the BufferingProgress dependency property.
        /// </summary>
        public static readonly BindableProperty BufferingProgressProperty =
          BindableProperty.Create(nameof(BufferingProgress), typeof(double), typeof(MediaElement), 0.0);

        /// <summary>
        /// Identifies the IsLooping dependency property.
        /// </summary>
        public static readonly BindableProperty IsLoopingProperty =
          BindableProperty.Create(nameof(IsLooping), typeof(bool), typeof(MediaElement), false);

        /// <summary>
        /// Identifies the KeepScreenOn dependency property.
        /// </summary>
        public static readonly BindableProperty KeepScreenOnProperty =
          BindableProperty.Create(nameof(KeepScreenOn), typeof(bool), typeof(MediaElement), false);

        /// <summary>
        /// Identifies the Source dependency property.
        /// </summary>
        public static readonly BindableProperty SourceProperty =
          BindableProperty.Create(nameof(Source), typeof(Uri), typeof(MediaElement));

        /// <summary>
        /// Identifies the CurrentState dependency property.
        /// </summary>
        public static readonly BindableProperty CurrentStateProperty =
          BindableProperty.Create(nameof(CurrentState), typeof(MediaElementState), typeof(MediaElement), MediaElementState.Closed);

        /// <summary>
        /// Identifies the Position dependency property.
        /// </summary>
        public static readonly BindableProperty PositionProperty =
          BindableProperty.Create(nameof(Position), typeof(TimeSpan), typeof(MediaElement), TimeSpan.Zero, validateValue: ValidatePosition);

        private static bool ValidatePosition(BindableObject bindable, object value)
        {
            MediaElement element = bindable as MediaElement;
            if (element != null)
            {
                if (element._renderer != null)
                {
                    element._renderer.Seek((TimeSpan)value);
                }
            }

            return true;
        }

        /// <summary>
        /// Identifies the Stretch dependency property.
        /// </summary>
        public static readonly BindableProperty StretchProperty =
          BindableProperty.Create(nameof(Stretch), typeof(Stretch), typeof(MediaElement), Stretch.Uniform);



        private IMediaElementRenderer _renderer = null;

         public void SetRenderer(IMediaElementRenderer renderer)
        {
            _renderer = renderer;
        }


        /// <summary>
        /// Gets or sets a value that determines whether the standard transport controls are enabled.
        /// </summary>
        public bool AreTransportControlsEnabled
        {
            get { return (bool)GetValue(AreTransportControlsEnabledProperty); }
            set { SetValue(AreTransportControlsEnabledProperty, value); }
        }

        /// <summary>
        /// Gets or sets a value that indicates whether media will begin playback automatically when the <see cref="Source"/> property is set.
        /// </summary>
        public bool AutoPlay
        {
            get { return (bool)GetValue(AutoPlayProperty); }
            set { SetValue(AutoPlayProperty, value); }
        }

        /// <summary>
        /// Gets a value that indicates the current buffering progress.
        /// </summary>
        /// <value>The amount of buffering that is completed for media content.
        /// The value ranges from 0 to 1. 
        /// Multiply by 100 to obtain a percentage.</value>
        public double BufferingProgress
        {
            get
            {
                return (double)GetValue(BufferingProgressProperty);
            }
        }

        /// <summary>
        /// Gets or sets a value that describes whether the media source currently loaded in the media engine should automatically set the position to the media start after reaching its end.
        /// </summary>
        public bool IsLooping
        {
            get { return (bool)GetValue(IsLoopingProperty); }
            set { SetValue(IsLoopingProperty, value); }
        }

        /// <summary>
        /// Gets or sets a value that specifies whether the control should stop the screen from timing out when playing media.
        /// </summary>
        public bool KeepScreenOn
        {
            get { return (bool)GetValue(KeepScreenOnProperty); }
            set { SetValue(KeepScreenOnProperty, value); }
        }

        public TimeSpan NaturalDuration
        {
            get
            {
                if (_renderer != null)
                {
                    return _renderer.NaturalDuration;
                }

                return TimeSpan.Zero;
            }
        }

        public int NaturalVideoHeight
        {
            get
            {
                if (_renderer != null)
                {
                    return _renderer.NaturalVideoHeight;
                }

                return 0;
            }
        }

        public int NaturalVideoWidth
        {
            get
            {
                if (_renderer != null)
                {
                    return _renderer.NaturalVideoWidth;
                }

                return 0;
            }
        }

        /// <summary>
        /// Gets or sets a media source on the MediaElement.
        /// </summary>
        [TypeConverter(typeof(Xamarin.Forms.UriTypeConverter))]
        public Uri Source
        {
            get { return (Uri)GetValue(SourceProperty); }
            set { SetValue(SourceProperty, value); }
        }

        private IDictionary<string, string> _httpHeaders = new Dictionary<string, string>();
        public IDictionary<string, string> HttpHeaders
        {
            get
            {
                return _httpHeaders;
            }
        }

        /// <summary>
        /// Gets the status of this MediaElement.
        /// </summary>
        public MediaElementState CurrentState
        {
            get { return (MediaElementState)GetValue(CurrentStateProperty); }
            internal set
            {
                SetValue(CurrentStateProperty, value);
            }
        }

        public void RaiseCurrentStateChanged()
        {
            CurrentStateChanged?.Invoke(this, EventArgs.Empty);
        }

        /// <summary>
        /// Gets or sets the current position of progress through the media's playback time.
        /// </summary>
        public System.TimeSpan Position
        {
            get
            {
                if (_renderer != null)
                {
                    return _renderer.Position;
                }

                return (TimeSpan)GetValue(PositionProperty);
            }

            set
            {
                SetValue(PositionProperty, value);
            }
        }

        /// <summary>
        /// Plays media from the current position.
        /// </summary>
        public void Play()
        {
            CurrentState = MediaElementState.Playing;
        }

        /// <summary>
        /// Pauses media at the current position.
        /// </summary>
        public void Pause()
        {
            if (CurrentState == MediaElementState.Playing)
            {
                CurrentState = MediaElementState.Paused;
            }
        }

        /// <summary>
        /// Stops and resets media to be played from the beginning.
        /// </summary>
        public void Stop()
        {
            if (CurrentState != MediaElementState.Stopped)
            {
                CurrentState = MediaElementState.Stopped;
            }
        }

        /// <summary>
        /// Gets or sets a value that describes how an MediaElement should be stretched to fill the destination rectangle.
        /// </summary>
        /// <value>A value of the <see cref="Stretch"/> enumeration that specifies how the source visual media is rendered.
        /// The default value is Uniform.</value>
        public Stretch Stretch
        {
            get
            {
                return (Stretch)GetValue(StretchProperty);
            }

            set
            {
                SetValue(StretchProperty, value);
            }
        }

        /// <summary>
        /// Occurs when the value of the <see cref="CurrentState"/> property changes.
        /// </summary>
        public event EventHandler CurrentStateChanged;

        /// <summary>
        /// Occurs when the MediaElement finishes playing audio or video.
        /// </summary>
        public event EventHandler MediaEnded;

        public void RaiseMediaOpened()
        {
            MediaOpened?.Invoke(this, EventArgs.Empty);
        }

        /// <summary>
        /// Occurs when the media stream has been validated and opened, and the file headers have been read.
        /// </summary>
        public event EventHandler MediaOpened;

        public void RaiseSeekCompleted()
        {
            SeekCompleted?.Invoke(this, EventArgs.Empty);
        }

        /// <summary>
        /// Occurs when the seek point of a requested seek operation is ready for playback.
        /// </summary>
        public event EventHandler SeekCompleted;

        public void OnMediaEnded()
        {
            CurrentState = MediaElementState.Stopped;

            if (MediaEnded != null)
            {
                System.Diagnostics.Debug.WriteLine("Media Ended");
                MediaEnded(this, EventArgs.Empty);
            }
        }

        internal void RaisePropertyChanged(string propertyName)
        {
            OnPropertyChanged(propertyName);
        }
    }

    public interface IMediaElementRenderer
    {
        double BufferingProgress { get; }

        TimeSpan NaturalDuration { get; }

        int NaturalVideoHeight { get; }

        int NaturalVideoWidth { get; }

        TimeSpan Position { get; }

        void Seek(TimeSpan time);
    }
}

I don't have any clue how hide those icons. Any suggestions?

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited April 29

    You can try to set the drawable of three icons ( for example: Stretch) to null or delete the drawable image. Icons will be invisable.

    ...
    ///<summary>
    /// Gets or sets a value that describes how an MediaElement should be stretched to fill the destination rectangle.
    ///</summary>
    ///<value>A value of the<see cref="Stretch"/> enumeration that specifies how the source visual media is rendered.
    /// The default value is Uniform.
    </value>
    public Stretch Stretch
    {
        get
        {
            return (Stretch)GetValue(StretchProperty);
        }
    
        set
        {
            SetValue(StretchProperty, value);
        }
    }
    ...
    
  • judsonabrahamjudsonabraham USMember ✭✭✭
    edited April 29

    @yelinzh said:
    You can try to set the drawable of three icons ( for example: Stretch) to null or delete the drawable image. Icons will be invisable.

    ...
    ///<summary>
    /// Gets or sets a value that describes how an MediaElement should be stretched to fill the destination rectangle.
    ///</summary>
    ///<value>A value of the<see cref="Stretch"/> enumeration that specifies how the source visual media is rendered.
    /// The default value is Uniform.
    </value>
    public Stretch Stretch
    {
        get
        {
            return (Stretch)GetValue(StretchProperty);
        }
    
        set
        {
            SetValue(StretchProperty, value);
        }
    }
    ...
    

    Where can I find the drawable of three icons? what is the reference for those icons? The stretch is used to set the aspect ratio. But I need to hide those icons and I don't know the reference required for those icons.

  • JarvanJarvan Member, Xamarin Team Xamurai

    The plugin contains a custom VideoView where these icons are added. You can customize a VideoView to drawable the effect you want.

    https://github.com/inthehand/InTheHand.Forms/blob/master/InTheHand.Forms/InTheHand.Forms.Platform.Android/VideoView.cs
    Tutorial: https://developer.xamarin.com/api/type/Android.Widget.VideoView/

Sign In or Register to comment.