[QUESTION] How I can get src from the audio/video tags ?

[aniketsongara]

I want the source(src) value from the below audio tag

<audio controls>
  <source src="http://dev.teeme.net/workplaces/aniket2/editor_uploads/01e6e0117e45dbfcb83887b3ca18583d4b23cd36.mp3" type="audio/mp3">
</audio>

I was trying to get it using customRender in Html package but not able to get it.
here is what I am trying

Html(
        data: '''<audio controls>
  <source src="http://dev.teeme.net/workplaces/aniket2/editor_uploads/01e6e0117e45dbfcb83887b3ca18583d4b23cd36.mp3" type="audio/mp3">
</audio>''',
        shrinkWrap: true,
        customRender: {
           "audio": (context, child) {
                 debugPrint("audio tag : ${context.tree.attributes['src']}");
                      return Text("Audio : ${context.tree.attributes['src']}");
                      }
      })

[tneotia]

See https://github.com/Sub6Resources/flutter_html/blob/master/lib/src/replaced_element.dart#L368-L374 for how we do it, you can apply the same approach in your customRender code.

[erickok]

What version of flutter_html are you on? You should get the render context, which contains the full html node, including the <source> tag you are looking for and then grab the src attribute from it..

[aniketsongara]

See https://github.com/Sub6Resources/flutter_html/blob/master/lib/src/replaced_element.dart#L368-L374 for how we do it, you can apply the same approach in your customRender code.

I tried with your solution reference but still unable to get src, here is my code

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MaterialApp(
    title: 'Test Html',
    debugShowCheckedModeBanner: false,
    home: TestHtml(),
  ));
}

class TestHtml extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TestHtmlState();
  }
}

class _TestHtmlState extends State<TestHtml> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("App Bar"),
      ),
      body: Center(
        child: Html(
          data: '''<h1> Audio Testing</h1><br/><audio controls>
  <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mp3">
</audio>''',
          customRender: {
            "audio": (context, child) {
              return Text(
                  "Audio src : ${context.tree.element.attributes['src']}");
            }
          },
        ),
      ),
    );
  }
}

[aniketsongara]

What version of flutter_html are you on? You should get the render context, which contains the full html node, including the <source> tag you are looking for and then grab the src attribute from it..

I am using the flutter_html: ^2.1.0 version and I am getting the renderContext but i think <source> tag is missing somewhere, above I have commented my sample code.

[tneotia]

@aniketsongara can you try this code inside customRender:

final sources = <String?>[
        if (context.tree.element.attributes['src'] != null) context.tree.element.attributes['src'],
        ...ReplacedElement.parseMediaSources(context.tree.element.children),
      ];
if (sources.isEmpty) return Container();
final String? source = sources.first;
//return widget here using source as src

[aniketsongara]

@tneotia Thanks It's working, but what is wrong in above sample code ??

[tneotia]

@tneotia Thanks It's working, but what is wrong in above sample code ??

Your HTML looks like this:

<audio controls>
  <source src="some_src" type="audio/mp3">
</audio>

So when you override <audio> in customRender and try to get its attributes, it doesn't have any besides controls. So .attributes['src'] returns null. Now say for example your HTML is like this:

<audio controls src="some_src"/>

Then your sample code would work. But because you have the nested source tag instead of the src attribute defined, we must get the .children of the <audio> tag and try to get the src from there.