Horizontal News Ticker Plugin

The ticker plugin allows you to scroll text news horizontally at the bottom or top of the player. In addition to short news text, the user may also display independent news titles or scroll news titles only. News content is loaded from the RSS-like document and refreshed at user-defined time intervals (default: 10 seconds).
The ticker plugin allows to display current local time and brand icon (bottom ticker), just like many TV broadcasters used to do.
When the RSS <link> element is defined for the news item, scrolling news title or news text becomes a link as well. When a non standard RSS <pubTime> element is defined, e.g., 16:24, it will precede the news title or text.

Code snippet

<link href="//domain.com/videojs/videojs.min.css" rel="stylesheet" type="text/css" />
<link href="//domain.com/videojs/plugins/videojs.ticker.css" rel="stylesheet" type="text/css" />
<script src="//domain.com/videojs/video.min.js"></script>
<script src="//domain.com/videojs/nuevo.min.js"></script>
<script src="//domain.com/videojs/plugins/videojs.ticker.js"></script>

<script>
const player = videojs("my_player_id", license: "key");
player.nuevo({ contextMenu:false });
player.ticker({ rss:"/path-to-rss-news" });
</script>

RSS news document is a kind of RSS document with simple structure (check source code).
If RSS descriptions are missing for each news item, the plugin will scroll news titles only. If RSS titles are missing, the title block will be hidden, and the description items will scroll anyway.

Code snippet

<rss version="2.0">
<item>
<title>News title here</title>
<description>News text here</description>
</item>
</rss>

RSS may include a link element for one or more news items and news publish times (check the source code).

Code snippet

<rss version="2.0">
<item>
<title>News title here</title>
<description>News text here</description>
<pubTime>16:24</pubTime>
<link>News URL here</link>
</item>
</rss>

Local time display is enabled by default. You can disable it in an easy way:

Code snippet

player.ticker{{ clock:false })

Brand logo icon display is optional (not defined by default). The logo icon can be defined only for the bottom ticker.

Code snippet

player.ticker{{ logo: "path-to-logo-icon.png", logourl: "path-to-go-on-logo-click" })

The speed of scrolling news can be adjusted.The default speed is 5. The allowed range is 1–10.

Code snippet

player.ticker{{ speed:2 })

The ticker can be displayed at the top of the player. However, at this position, the logo icon will not show up, even if defined.

Code snippet

player.ticker{{ position:"top" })

It is possible to change the text direction of news titles and descriptions.

Code snippet

player.ticker{{ direction:"rtl" })

The ticker plugin is refreshed at user-defined intervals. The default refresh timeout is 10 minutes. After this time, the plugin rereads RSS news and ticker content is refreshed. It is possible to set any refresh timeout through the plugin's option.

Code snippet

player.ticker{{ refresh: 20 })

When you mouseover the scroll line, it will pause to scroll text. When you click on the title line, scroll animation will be paused until you click the title line again.
On touch screen, scroll will pause when you touch the title block or scrolling text and start scrolling when you touch it again.

The plugin features two public functions to hide and show the ticker.

Code snippet

player.ticker.hide();
player.ticker.show();