How to play an embedded YouTube (using the Gecko browser) for the first time in c# through javascript?

Question

I'm currently creating a WPF app and have a Gecko Browser navigated to an embedded youtube video (www.youtube.com/embed/YId_6G-YLpQ).

So far I've managed to do the following through javascript commands:

1. Play a paused video using:

document.getElementsByTagName('video')[0].play()

2. Pause a video using:

document.getElementsByTagName('video')[0].pause()

However, I couldn't figure out how do I start the video for the very first time. Using the play method doesn't work. I need to run it through the code and not through the physical click since it'll trigger the dispatch timer that will frequently raise the property changed to return the current video time.

So far I have a few dirty approaches just to get by:

Manual

1. I manually press the play button (by clicking it with the mouse)
2. Pause the video (using the wpf button with the pause method)
3. Drag the time slider all the way back from the start of the video
4. Play the video (using the wpf button with the play method)

It's not at seamless as I wanted it to be but provided that I don't change videos, I only have to do this once.

Semi-Manual

1. Create a variable called 'youTubeVideoHasStarted'
2. Play video method does an if on 'youTubeVideoHasStarted', if true = play video, if false = perform a simulated left click on the YouTube video (I'll probably use a canvass on here and just divide both height/width to get a dead-center click on the video) then set 'youTubeVideoHasStarted = true' and reset the latter if the link was changed

Here's my code for reference

    public RelayCommand PlayYouTubeCommand { get; private set; }
    public RelayCommand PauseYouTubeCommand { get; private set; }

    public bool PlayYouTubeCanUse(object msg)
    {
        if (!YouTubeIsPlaying)
            return true;
        return false;
    }

    public void PlayYouTube(object msg)
    {
        try
        {
            using (Gecko.AutoJSContext js = new Gecko.AutoJSContext(YouTubeBrowser.Window))
            {
                js.EvaluateScript("document.getElementsByTagName('video')[0].play()");
            }
            RaisePropertyChanged("YouTubeCurrentTime");
            YouTubeIsPlaying = true;
        }
        catch { MessageBox.Show("Error playing video"); }
    }

    public bool PauseYouTubeCanUse(object msg)
    {
        if (YouTubeIsPlaying)
            return true;
        return false;
    }

    public void PauseYouTube(object msg)
    {
        try
        {
            using (Gecko.AutoJSContext js = new Gecko.AutoJSContext(YouTubeBrowser.Window))
            {
                js.EvaluateScript("document.getElementsByTagName('video')[0].pause()");
            }
            RaisePropertyChanged("YouTubeCurrentTime");
            YouTubeIsPlaying = false;
        }
        catch { MessageBox.Show("Error pausing video"); }
    }

    private GeckoWebBrowser youTubeBrowser;
    public GeckoWebBrowser YouTubeBrowser
    {
        get { return youTubeBrowser; }
        set { youTubeBrowser = value; RaisePropertyChanged("YouTubeBrowser"); }
    }

Here's the list of properties and methods used:

https://www.w3schools.com/tags/ref_av_dom.asp

Answer 1

I used document.getElementsByTagName('video')[0].click()