Viewer Library: Detailed Usage of the content Parameter and How to Embed Media Files from Other Platforms

Last updated: 24 days ago

Category: Examples

The Viewer media viewer supports full-screen viewing of multimedia files, including images, videos, audio, maps, iframes, and other embeddable platform links.

Content Parameters

The core parameter of the media viewer is content, which retrieves media resources and supports multiple data types including strings, DOM nodes, objects, and arrays.

Content as Node Selector

If content is a string, it will first be treated as a node selector to attempt to find the corresponding node in the page. If figure child nodes are used, all figure child nodes will be located, and the img and figcaption child nodes within will be extracted. The src attribute of the img node serves as the media address, while the content of figcaption becomes the title.

If figure nodes are not used, all img child nodes will be found, with the src and alt/title attributes extracted.

Content as Image URL

If content is a string and cannot be resolved as a node selector, it will be treated as an image URL. Multiple image URLs should be separated by commas.

Content as DOM Node

If content is a DOM node, it will extract figure, img, and figcaption tags to retrieve media file URLs and titles.

Content as Standard Object

If content is a standard object, it may include the following properties:

• media: Media file URL (required)
• caption: Title text
• type: Media type (video/audio/image/text/iframe/html/dom, defaults to image)
• source: Source file URL for download functionality (falls back to media if unavailable)
• cover: Thumbnail image (required when thumb parameter is enabled)
• unfenced: Disables width constraints (for text/html/dom types)
• attrs: Additional HTML attributes for media elements (e.g., {alt:'',title:''})

Content as Array

When content is an array, each item can be a file URL, node selector, DOM node, or standard object.

Content as Async URL

For async content loading, specify contType:'async' and provide the endpoint URL in content.

Type=Text/Html/Dom

Demonstrates usage with type=text/html/dom content.

Embedding Maps

Embed maps from platforms like Google/Yandex/Baidu by passing standard objects to content.

Embedding Videos

Embed videos from platforms like YouTube/TikTok/Vimeo by either:

1. iframe embedding
2. Custom JS initialization

Embedding Code Snippets

Code platforms like CodePen/JSFiddle can be embedded via:

1. iframe embedding
2. Custom DOM/text content

Embedding Charts

All major chart libraries (Chart.js/ECharts/D3.js/ApexCharts) are supported.

Embedding Forms

Third-party forms (e.g. Google Forms) can be embedded via iframe.

Embedding Music

Music platforms (Spotify/Apple Music) can be embedded via iframe.

Embedding Design Portfolios

Platforms like Figma/Canva can be embedded via iframe.

Embedding Live Data

Real-time data platforms (TradingView/Flightradar24) can be embedded.