langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 12:05:30 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

HTML Video/Audio Elements Render Multiple Player Instances #20193

New Issue
Closed
opened 2026-02-21 20:06:15 -05:00 by yindo · 1 comment
yindo commented 2026-02-21 20:06:15 -05:00
Owner
Copy Link
Copy Source

Originally created by @Xiu-Lan on GitHub (Nov 7, 2025).

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report, otherwise it will be closed.
  • 【中文用户 & Non English User】请使用英语提交，否则会被关闭 ：）
  • Please do not modify this template :) and fill in all the required fields.

Dify version

1.9.2

Cloud or Self Hosted

Cloud

Steps to reproduce

  1. Open a chat assistant page
  2. Send a message containing HTML video/audio elements with multiple <source> tags:
<video controls>
  <source src="https://www.w3ccoo.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3ccoo.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<audio controls>
  <source src="https://www.w3ccoo.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3ccoo.com/html/horse.mp3" type="audio/mpeg">
</audio>
  1. Observe the rendered output

✔️ Expected Behavior

The page should render:

  • 1 video player with multiple source elements (for browser to select best format)
  • 2 audio player with multiple source elements (for browser to select best format)

This is the standard HTML5 behavior where multiple <source> tags allow the browser to choose the best compatible format.

❌ Actual Behavior

The page renders:

  • 1 video player instances (one per <source> tag)
  • 2 audio player instances (one per <source> tag)
Image
Originally created by @Xiu-Lan on GitHub (Nov 7, 2025). ### Self Checks - [x] I have read the [Contributing Guide](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) and [Language Policy](https://github.com/langgenius/dify/issues/1542). - [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report, otherwise it will be closed. - [x] 【中文用户 & Non English User】请使用英语提交，否则会被关闭 ：） - [x] Please do not modify this template :) and fill in all the required fields. ### Dify version 1.9.2 ### Cloud or Self Hosted Cloud ### Steps to reproduce 1. Open a chat assistant page 2. Send a message containing HTML video/audio elements with multiple `<source>` tags: ```html <video controls> <source src="https://www.w3ccoo.com/html/mov_bbb.mp4" type="video/mp4"> <source src="https://www.w3ccoo.com/html/mov_bbb.ogg" type="video/ogg"> </video> <audio controls> <source src="https://www.w3ccoo.com/html/horse.ogg" type="audio/ogg"> <source src="https://www.w3ccoo.com/html/horse.mp3" type="audio/mpeg"> </audio> ``` 3. Observe the rendered output ### ✔️ Expected Behavior The page should render: - **1 video player** with multiple source elements (for browser to select best format) - **2 audio player** with multiple source elements (for browser to select best format) This is the standard HTML5 behavior where multiple `<source>` tags allow the browser to choose the best compatible format. ### ❌ Actual Behavior The page renders: - **1 video player instances** (one per `<source>` tag) - **2 audio player instances** (one per `<source>` tag) <img width="1917" height="955" alt="Image" src="https://github.com/user-attachments/assets/d40aaed2-fab2-4b24-ab01-9256eee44a4b" />
yindo added the 🐞 bugcloud labels 2026-02-21 20:06:15 -05:00
yindo closed this issue 2026-02-21 20:06:15 -05:00
yindo commented 2026-02-21 20:06:15 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Nov 7, 2025):

This bug is caused by how the Dify frontend parses and renders HTML5 <video> and <audio> elements with multiple <source> tags. Instead of grouping all <source> tags under a single media player (the standard HTML5 behavior), the custom Markdown/HTML parser creates a separate player for each <source>, resulting in multiple players per element. This issue originates from the frontend's Markdown rendering logic, specifically in the React components responsible for rendering chat content and media blocks1 .

A recent refactor centralized markdown rendering in a new ReactMarkdownWrapper component, which defines custom renderers for video and audio elements2 . However, the bug persists because the parser or the custom components (VideoBlock, AudioBlock) do not aggregate <source> children correctly. To fix this, the logic in these components or the parser should be updated to ensure all <source> tags are rendered as children of a single <video> or <audio> element, matching standard HTML5 behavior.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Chat with Dosu Join Discord Share on X

@dosubot[bot] commented on GitHub (Nov 7, 2025): <!-- Answer --> This bug is caused by how the Dify frontend parses and renders HTML5 `<video>` and `<audio>` elements with multiple `<source>` tags. Instead of grouping all `<source>` tags under a single media player (the standard HTML5 behavior), the custom Markdown/HTML parser creates a separate player for each `<source>`, resulting in multiple players per element. This issue originates from the frontend's Markdown rendering logic, specifically in the React components responsible for rendering chat content and media blocks[^1]. A recent refactor centralized markdown rendering in a new `ReactMarkdownWrapper` component, which defines custom renderers for video and audio elements[^2]. However, the bug persists because the parser or the custom components (`VideoBlock`, `AudioBlock`) do not aggregate `<source>` children correctly. To fix this, the logic in these components or the parser should be updated to ensure all `<source>` tags are rendered as children of a single `<video>` or `<audio>` element, matching standard HTML5 behavior. [^1]: [Dify chat answer rendering in React](https://github.com/langgenius/dify/blob/37903722fe3583cd82addb804e57b1dcdd959e4b/web/app/components/base/chat/chat/answer/index.tsx#L1-L234) [^2]: [Markdown rendering refactor PR #26310](https://github.com/langgenius/dify/pull/26310) <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/1f6dbc53-4909-46b4-82ab-fa1bb82e33d4?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/1f6dbc53-4909-46b4-82ab-fa1bb82e33d4?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/1f6dbc53-4909-46b4-82ab-fa1bb82e33d4?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/1f6dbc53-4909-46b4-82ab-fa1bb82e33d4?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/1f6dbc53-4909-46b4-82ab-fa1bb82e33d4?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/1f6dbc53-4909-46b4-82ab-fa1bb82e33d4?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/1f6dbc53-4909-46b4-82ab-fa1bb82e33d4?feedback_type=other)</sup>&nbsp;&nbsp;[![Chat with Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/6088a4f4-073a-43f3-b3d4-4f06fb0c05a0/ask?utm_source=github)&nbsp;[![Join Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share on X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/langgenius/dify/issues/27970)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label cloud 🐞 bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#20193
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?