Where is the proper place to parse text for YouTube videos?

[mark8044]

My YouTube urls in my HTML string are usually as follows

<a href="https://www.youtube.com/embed/tgbNymZ7vqY">https://www.youtube.com/embed/tgbNymZ7vqY</a>

OR

https://www.youtube.com/embed/tgbNymZ7vqY

I was previously successfully using a BuildOp to create a custom YouTube widget by regexing for YouTube urls inside .parse.

Now I've switched from flutter_widget_from_html_core to flutter_widget_from_html and am using your YouTube parser, but I need to get my YouTube video into a proper iframe format by parsing the html.

It looks like the .parse is happening after your YouTube parser.

When I put in the below code into .parse, which I previously used successfully as part of a BuildOp, the raw text HTML <iframe src="https://www.youtube.com/embed/..." allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe> shows up in the final output rather then a YouTube video.

I can get it to work by pre parsing the HTML before I even send it to HtmlWidget but Id rather parse it inside the widget itself so I can take advantage of the tree structure as my YouTube URLs are sometimes sitting inside <a></a> and sometimes not. Its also cleaner for me to do it inside HtmlWidget since I am using the widget in multiple places in my app

    if (meta.element.localName == 'a') {

      ///CHEK FOR YOUTUBE
      RegExp regExp = new RegExp(
        r'.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*',
        caseSensitive: false,
        multiLine: false,
      );

      final match = regExp.firstMatch(meta.element.text); 

      if (match != null)
      {

        /// YOUTUBE VIDEO CODE
        var youtubeCode = match.group(1);

        var _nText = '<iframe src="https://www.youtube.com/embed/'+youtubeCode.toString()+'" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>';
        meta.register(BuildOp(
          onTree: (meta, tree) {
            tree.replaceWith(TextBit(tree, _nText));
          },
        ));

[daohoangson]

So you have 3 different ways to render a YouTube player from HTML?

1. The IFRAME tag
2. The A tag
3. Plain text

The IFRAME is already handled by flutter_widget_from_html so you are asking for ways to parse (2) and (3)?

Do you want to use your custom player or the web view widget?

[mark8044]

So you have 3 different ways to render a YouTube player from HTML?

1. The IFRAME tag
2. The A tag
3. Plain text

The IFRAME is already handled by flutter_widget_from_html so you are asking for ways to parse (2) and (3)?

Do you want to use your custom player or the web view widget?

Well I have #2 or #3. I am trying to get everything into #1 so it will work with your built in webview iframe YouTube player.

I could pre-parse my html to get #2/3 into #1, but I'd rather do the parsing within HtmlWidget to keep my code a bit more simple. So I can successfully parse the text of #2/3 to turn into #1 but it shows up in HtmlWidget as plain text (rather then an actual video widget), because I assume the parse is happening after the iframe/webview parsing is happening? I've also tried to do the parse in buildText but same result. Is there a way I can parse the text before the ifram/webview is built?

[daohoangson]

Yeah, using TextBit will render your iframe as plain text without any further processing. To support the A tag use case, it's possible with a custom factory: find potential href and render a webview directly. Something like this:

mixin _YouTubeLink on WidgetFactory {
  @override
  void parse(BuildMetadata meta) {
    final e = meta.element;
    if (e.localName == 'a') {
      final href = e.attributes['href'];
      if (href?.contains('youtube.com/embed') == true) {
        meta.register(BuildOp(
          onWidgets: (context, widgets) {
            return [buildWebView(meta, href)];
          },
        ));
        return;
      }
    }

    super.parse(meta);
  }
}

The plain text is also possible but harder because you need to look into each DOM element and extract the embed link from there. Which is slow and error prone. It's probably easier if you have your own MyHtmlWidget which does the regex replace before feeding it into HtmlWidget.