Difference between revisions of "JavaScript Library"
(→Example of using Ace Stream Javascript API to embed player on the page.) |
(→Guide) |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
Ace Stream JavaScript Library provides tools to embed video player on web-pages with minimum effort. | Ace Stream JavaScript Library provides tools to embed video player on web-pages with minimum effort. | ||
| − | == | + | == Guide == |
First, add javascript library on the page (inside the <head> tag): | First, add javascript library on the page (inside the <head> tag): | ||
<tt><script src="//static.acestream.net/jsapi/acestream.min.js"></script></tt> | <tt><script src="//static.acestream.net/jsapi/acestream.min.js"></script></tt> | ||
| Line 7: | Line 7: | ||
Then you can create the player with this code: | Then you can create the player with this code: | ||
<tt><nowiki> | <tt><nowiki> | ||
| − | var | + | var player = null; |
| − | + | AceStream.createPlayer("#player", { | |
| − | + | onLoad: function (playerObj) { | |
| − | + | player = playerObj; | |
| − | + | player.loadContentId("94c2fd8fb9bc8f2fc71a2cbe9d4b866f227a0209"); | |
| − | + | }, | |
| − | + | onError: function(err) { | |
| − | + | console.log("init: error: " + err); | |
| + | } | ||
| + | }); | ||
</nowiki></tt> | </nowiki></tt> | ||
Player is created in the HTML-container with id "player". | Player is created in the HTML-container with id "player". | ||
| Line 27: | Line 29: | ||
*<tt>loadDirectUrl(url)</tt> - load by direct content URL (this can be direct link to some video file, HLS stream or link supported by Ace Stream plugins: youtube, twitch etc). | *<tt>loadDirectUrl(url)</tt> - load by direct content URL (this can be direct link to some video file, HLS stream or link supported by Ace Stream plugins: youtube, twitch etc). | ||
| − | + | You can create more than one player on the same web page. To do this you need to provide a separate HTML container for each player and call AceStream.createPlayer() method on each container. You can find example on the demo page. | |
| − | Working | + | == Demo == |
| + | Working demo is available [http://acestream.net/demos/embedding/index.html here] | ||
==Additional features== | ==Additional features== | ||
| Line 43: | Line 46: | ||
== Roadmap == | == Roadmap == | ||
| − | New JS | + | New JS library consists of reusable javascript modules which are bundled with browserify. Currently only the bundled version is distributed, but we plan to prepare documentation for these modules and publish it along with the source code on github. |
Modules will implement such functionality like: | Modules will implement such functionality like: | ||
| Line 51: | Line 54: | ||
* etc | * etc | ||
| − | == Legacy JS | + | == Legacy JS Library == |
| − | The old version of JS | + | The old version of JS Library is still available. You can find test page and links [http://acestream.net/demos/embedding/index-legacy.html here.] |
Latest revision as of 10:30, 21 November 2018
Ace Stream JavaScript Library provides tools to embed video player on web-pages with minimum effort.
Guide
First, add javascript library on the page (inside the <head> tag):
<script src="//static.acestream.net/jsapi/acestream.min.js"></script>
Then you can create the player with this code:
var player = null;
AceStream.createPlayer("#player", {
onLoad: function (playerObj) {
player = playerObj;
player.loadContentId("94c2fd8fb9bc8f2fc71a2cbe9d4b866f227a0209");
},
onError: function(err) {
console.log("init: error: " + err);
}
});
Player is created in the HTML-container with id "player".
Upon successful player creation onLoad callback is called and player object is passed as parameter. You should save player object to some variable to be able to call player methods later, for example, to switch to another content. Currently such method are available:
- loadContentId(contentId) - load by Content ID (unique identified in Ace Stream system);
- loadTransportFileUrl(url) - load by transport file URL;
- loadInfohash(infohash) - load by infohash;
- loadMagnet(magnetUri) - load by magnet link;
- loadDirectUrl(url) - load by direct content URL (this can be direct link to some video file, HLS stream or link supported by Ace Stream plugins: youtube, twitch etc).
You can create more than one player on the same web page. To do this you need to provide a separate HTML container for each player and call AceStream.createPlayer() method on each container. You can find example on the demo page.
Demo
Working demo is available here
Additional features
If the user has a browser extension Ace Script with the activated userscript Ace Cast, the following additional features will be available:
- Automatically start Ace Stream application for content playback (there is no need to manually start the application if it isn't running)
- Select any installed desktop player for playback
- Playback content on remote devices over protocols Ace Cast, Google Cast, AirPlay and others
- Add content to user's playlist, in his Ace Stream personal media server
- Convenient ways to share content
In order to inform the user about these features, the corresponding information block is shown after clicking on "menu" or "play" button.
Attention! The need to use a browser extension and a userscript to make additional features available is temporary, until we implement a solution that allows direct and secure communication between javascript code and the Ace Stream application.
Roadmap
New JS library consists of reusable javascript modules which are bundled with browserify. Currently only the bundled version is distributed, but we plan to prepare documentation for these modules and publish it along with the source code on github.
Modules will implement such functionality like:
- checking engine status and version and running it if necessary
- encapsulate all avaialble Ace Stream HTTP API methods
- provide reusable markup
- etc
Legacy JS Library
The old version of JS Library is still available. You can find test page and links here.
