OpenBroadcaster Widget Demo

Example 1

Display individual media items.

Audio with auto generated Thumbnail

<div class="ob-stream-widget" data-media="236"></div>

Video with auto generated Thumbnail

<div class="ob-stream-widget" data-media="234"></div>

HD Video with auto generated Thumbnail

<div class="ob-stream-widget" data-media="116"></div>

Example 2

Display all items within a sub-category (genre).

<div class="ob-stream-widget" data-genre="313"></div>

Example 3

Display all items within a category. Provide extra metadata.

<div class="ob-stream-widget" data-category="3" data-metadata='{"Title": "title", "Category": "category_name", "Album": "album", "Genre": "genre_name", "Artist": "artist", "Comments": "comments"}'></div>

Example 4

Same as example 3, but use a grid layout and modal window for the player.

<div class="ob-stream-widget" data-grid data-modal-player data-category="3"></div>

Example 5

Same as example 4, but also hides links.

Audio

<div class="ob-stream-widget" data-grid data-modal-player data-hide-download data-hide-play data-category="3"></div>

Image

<div class="ob-stream-widget" data-grid data-modal-player data-hide-download data-hide-play data-genre="220"></div>

Image with info

<div class="ob-stream-widget" data-grid data-modal-player data-hide-download data-hide-play data-genre="220"></div>

Video

<div class="ob-stream-widget" data-grid data-modal-player data-hide-download data-hide-play data-category="9"></div>

Example 6

Same as example 6, but with a genre (sub-category) and name filter.

Audio

<div class="ob-stream-widget" data-grid data-modal-player data-hide-download data-hide-play data-name-filter data-genre-filter data-category="19"></div>

Image

<div class="ob-stream-widget" data-grid data-modal-player data-hide-download data-hide-play data-name-filter data-genre-filter data-category="10"></div>

Example 7

Same as example 3, but limit items loaded per request.

<div class="ob-stream-widget" data-category="10" data-limit="5" data-more="link"></div>

Play in Modal with autoload when scrolling

<div class="ob-stream-widget" data-category="10" data-limit="5" data-more="auto"></div>