Chrome Cast Adds Chrome Cast support to the Flowplayer 3 Controlbar

This example displays the basic usage of the chromecast plugin feature using the default Chromecast receiver application. If chromecast is detected it will display an icon in the controlbar to launch.

Pre configured is a basic example custom receiver application with full control of the player and receiver api and a styled receiver application for simple branding.

Introduction

The Chromecast plugin enables playback and control of Chromecast directly within Flowplayer 3.

If the source is an rtmp stream or an unsupported format a secondary `castUrl` can be configured to enable playback.

When launched from the player the current stream or an alternative stream will begin playback on the Chromecast connected TV at the current streamtime.

The Chromecast can be detached to continue playback within the browser.

Chromecast API support is handled by the Flowplayer 3 javascript plugin.

The plugin can be configured with either a custom or styled Chromecast receiver application or use the default application when no ID is set.

Features

• Chromecast playback and control support within the Flowplayer 3 controlbar.
• Ease of use no requirement to handle the Chromecast api directly.
• Customisable status text and styling.
• Ability to customise your own receiver application or use the Chromecast default player.
• Custom receiver applications support provided. One receiver requires Flowplayer 5 and is built upon Flowplayer 5 and it's api. Another included custom receiver uses the Google api's to manage the video and can be styled on top.
• Event methods supplied for both versions of the custom receiver applications to manage playback, styling and displaying information from the cast media metadata.
• Included example stylesheet when configuing a Styled Receiver Application.
• Support for playing back multiple video formats including mp4, webm, mpeg dash with widevine encryption, smooth streaming with playready, apple http streaming with AES encryption, youtube and vimeo (with the Flowplayer 5 based receiver and plugins).
• Support for providing a source format for chromecast playback using the `cast` video type.
• All receiver applications including the default and Styled Receiver applications has support for HLS and Mpeg Dash live and VOD streaming.

More Information

• https://developers.google.com/cast/docs/registration
• https://developers.google.com/cast/docs/receiver_apps
• https://developers.google.com/cast/docs/custom_receiver
• https://developers.google.com/cast/docs/styled_receiver

(Current Version 3.2.18)

Compatibility

• Flowplayer 3.2.12 and above
• Flowplayer Controls Plugin 3.2.12 and above

Plugin Available For Purchase via Paypal

License Options

Single Domain - Suits Small Sites $210.00 AUD Multi Domain - Suits Larger Sites $420.00 AUD Single Domain Not For Profit $110.00 AUD Single Domain Bundle with Flowplayer 5 Plugin Version 20% $320.00 AUD Multi Domain Bundle with Flowplayer 5 Plugin Version 30% $590.00 AUD

Domain(s)

Download Demo (Version 3.2.18)

License Information

The Chromecast plugin is a once off commercial license with updates and support to the Chromecast plugin only. Flowplayer related questions and support may be provided on their forums at http://flowplayer.org/forum

• Single Domain License - Suitable for small sites with updates and unlimited support included.
• Multi Domain License - Suitable for larger sites and video platform sites with updates, feature requests and unlimited priority support included.
• Bundle License - Provide both Flowplayer 3 Flash features with Flowplayer 5 Html5 alternative.

Note:

With your purchase please provide your domains to be provided with your licensed plugin. New domains need to be requested manually for the moment.

Refund Policy:

Please request for a 60 day site demo before purchase. Refunds will not be issued unless under some circumstances sorry for the inconvenience.

Examples

Basic Example

Flowplayer configuration

Minimal playlist config with custom data to send for each clip.

    flowplayer("player", "../flowplayer.swf", {

        plugins:  {
            controls: { autoHide: false },
            rtmp: {
                url: "../flowplayer.rtmp.swf",
                netConnectionUrl: "rtmp://rtmp.electroteque.org/cfx/st"
            },
            cast: {
                url: '../flowplayer.chromecast-3.2.18.swf',

                onChromeCastPlay: function() {

                }
            }

        },

        playlist: [
            {
                url: "mp4:bitrate/big_buck_bunny_600k.mp4",
                castUrl: "http://videos.electroteque.org/big_buck_bunny_480p_h264.mp4",
                //castUrl: "http://playready.directtaps.net/smoothstreaming/SSWSS720H264PR/SuperSpeedway_720.ism/Manifest",
                //castUrl: "http://www.corsproxy.com/playertest.longtailvideo.com/adaptive/bbbfull/bbbfull.m3u8",
                //castUrl: "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd",
                still: "images/bbb.jpg",
                title: "Big Buck Bunny"
            },
            {
                url: "mp4:bitrate/elephants_dream.mp4",
                castUrl: "http://videos.electroteque.org/big_buck_bunny_480p_h264.mp4",
                still: "images/bbb.jpg",
                title: "Big Buck Bunny"
            }
        ],
        clip: {
            autoPlay: false,
            provider: "rtmp",
           //Custom receiver application, disabled for default google receiver application.
           //castAppID: "21178801"
           //Styled receiver application. Use a css styled google hosted receiver application.
           //castAppID: "B7E0B4B3"
        },
        log: {
            level: 'debug',
            filter: 'org.electroteque.chromecast.*, org.flowplayer.controller.*'
        }

    }).chromecast();

Supported Formats

• Mp4
• Mpeg Dash with Widevine encryption.
• Smooth Streaming with Playready.
• Apple Http Live Streaming with AES encryption.
• Youtube and Vimeo videos when using the Flowplayer 5 receiver application and the Youtube/Vimeo plugin and custom api engine.

To provide an alternate video for chromecast use the `cast` video type

    playlist: [
                {
                    url: "mp4:bitrate/big_buck_bunny_600k.mp4",
                    castUrl: "http://videos.electroteque.org/big_buck_bunny_480p_h264.mp4",
                    //castUrl: "http://playready.directtaps.net/smoothstreaming/SSWSS720H264PR/SuperSpeedway_720.ism/Manifest",
                    //castUrl: "http://www.corsproxy.com/playertest.longtailvideo.com/adaptive/bbbfull/bbbfull.m3u8",
                    //castUrl: "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd",
                    still: "images/bbb.jpg",
                    title: "Big Buck Bunny"
                }
            ]

Configuration

Sender Options

Chromecast Playlist Custom Data

Chromecast Dongle Network Setup

https://support.google.com/chromecast/answer/2998456?hl=en-AU

For the first time for everyone the Chromecast dongle is required to be setup to join your wifi network.

The Google setup instructions explains how to setup depending which platform you are on. With the OSX and Windows tool the program will trigger the dongle to setup a temporary Wireless Access Point called "Chromecast".

It is a requirement that your network location is set to automatic for the duration of the setup or else it will fail to connect if you have manual ip addresses enabled.

The program will ask to verify a code, then you enter the wifi passport and then it is connected.

For testing you are not required to have a custom receiver application if only testing with mp4 files.

Custom Receiver Application Registration

https://developers.google.com/cast/docs/registration

Your custom receiver application be it your own or using the provided receiver as a base requires to be registered to obtain an application ID.

It is not required to be published for debugging and testing. Once it is published it will become available on Google systems to advertise your application.

Choose the "Custom Receiver" option and enter the location of the custom receiver url.

Once registered you will be provided with an application ID which you configure into the "castAppID" config.

Styled Receiver Application Registration

The styled receiver application is possibly the simplest method to supply a receiver using a css styled Google hosted receiver instead.

Follow the same steps to register a custom receiver application but choose "Styled Receiver" instead.

The console will ask to supply a css file with specific class names by consulting the Chromecast styled receiver documentation. https://developers.google.com/cast/docs/styled_receiver

The css file is required to be hosted under HTTPS to be able to add it like https://static.electroteque.org/styled-receiver/css/receiver.css

NOTE:

After registering the custom and styled receiver applications the cast dongle is required to be rebooted and it could take up to an hour for the change to have an effect. You may experience launching problems before this.

Chromecast Device Registration For Debugging

https://developers.google.com/cast/docs/registration

The Chromecast device is required to also be registered for debugging purposes and to gain access to the debug console port.

At the end of the registration page explains how to also register your device by entering in it's serial number.

Chromecast Receiver Application Debug Port

It is possible to debug the receiver application into a chromecast console by entering the Chromecast dongle's ip address with a port 9222 on the end like 192.168.5.16:9222

To obtain the ip address you can obtain this from the DHCP table of your router.

Once the receiver has been launched locate to the Chromecast ip address and port and click "Remote Debugging (AppEngine)". For non-HTTPS connections, click the grey shield icon in the address bar in the top right hand corner and then click "load unsafe scripts".

More info: https://developers.google.com/cast/docs/debugging

CORS Requirements for HLS, Mpeg-Dash and Smoothstreaming Formats

For HLS, Mpeg-Dash and Smoothstreaming streaming formats Cross Origin Resource Sharing rules are required to be enabled. This is required for byte downloading of fragments over Ajax.

The header of the cors request must expose a `Access-Control-Allow-Origin` header with either a multiple list of domains including ports if using ports or an asterix wildcard to allow all domains.
A `Access-Control-Allow-Methods` can be exposed to control what request methods are allowed. For authenticated logins with cookies the `Access-Control-Allow-Credentials` header must be enabled and the feature will pass cookie sessions and other cookies along with the request.

An example request header can look like the following:

    Access-Control-Allow-Origin: http://localhost:8000
    Access-Control-Allow-Methods: GET
    Access-Control-Allow-Headers: Content-Type, Accept
    Access-Control-Allow-Credentials: true

Testing CORS Server Requests

CORS server requests can be initiated with the following curl command:

    curl -I -H "Origin: http://localhost:8000" http://path/to/server

Enabling CORS on S3

Follow the guide here to enable CORS rules on the bucket. Cloudfront does not function just yet because Chrome will send an OPTIONS request method which it does not allow.

The CORS header should look like the following:

    Access-Control-Allow-Origin: http://localhost:8000
    Access-Control-Allow-Methods: GET, HEAD
    Access-Control-Max-Age: 3000
    Access-Control-Allow-Credentials: true
    Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method

Custom Receiver API Documentation

To build your own receiver application more details can be found in the Chromecast API Google docs.

Custom Receiver Applications

Flowplayer 5 Custom Receiver Application

Provided is a custom receiver application api and plugin for Flowplayer 5 which supports multiple format playback and drm streaming.

    $(function () {





    function hover(flag) {
    $("#player").toggleClass("is-mouseover", flag).toggleClass("is-mouseout", !flag);
    }

    var api = $("#player").data("flowplayer");

    var castMedia = null;

    api.bind("castmedia", function(e, api, media) {
    castMedia = media;

    }).bind("senderconnect", function(e, info) {
    console.log("sender connected", info);
    }).bind("senderdisconnect", function(e, info) {
    console.log("sender disconnected", info);
    }).bind("caststandby", function(e, info) {
    console.log("standby", info);
    }).bind("castvisibility", function(e, info) {
    console.log("visibility", info);
    }).bind("castmessage", function(e, info) {
    console.log("cast message", info);
    }).bind("appstop", function(e, info) {
    console.log("cast app stop", info);
    }).bind("pause", function(e, api) {
    hover(true);
    }).bind("seek", function(e, api) {
    hover(true);
    setTimeout(function() { hover(false); }, 5000);
    }).bind("resume", function(e, api) {
    setTimeout(function() { hover(false); }, 5000);
    }).bind("ready", function(e, api, video) {
    //set the title from the chomecast metadata, fade in then fade out
    $("#info #title").text(castMedia.metadata.title);
    hover(true);
    });




    });

Custom Receiver Application Example

Provided is another custom receiver application api which does not require any video player and supports multiple format playback and drm streaming.

Very basic examples have been provided to style the interface after receiving streaming and cast events.

        $(function () {

            function hover(flag) {
                $(".cast-receiver-player").toggleClass("show-info", flag).toggleClass("hide-info", !flag);
            }

            //the player container
            var api = $(".cast-receiver-player ");

            //Receiver application setup. The Google api's will manage the video playback.

            var config = {
                    activityTimeout: 60000,
                    statusText: 'Ready to play',
                    debug: true,
                    logLevel: "none",
                    licenseUrl: "",
                    useCredentials: false,
                    licenseCustomData: "",
                    hasAdvancedStreaming: true
                };


            var app = new ChromeCastReiverApp(api, config);
            app.init();

            var castMedia = null;


            //chromecast specific events
            api.on("castmedia", function(e, media) {
                castMedia = media;
            }).on("senderconnect", function(e, info) {
                console.log("sender connected", info);
            }).on("senderdisconnect", function(e, info) {
                console.log("sender disconnected", info);
            }).on("caststandby", function(e, info) {
                console.log("standby", info);
            }).on("castvisibility", function(e, info) {
                console.log("visibility", info);
            }).on("castmessage", function(e, info) {
                console.log("cast message", info);
            }).on("appstop", function(e, info) {
                console.log("cast app stop", info);

                //html5 video events
            }).on("pause", function(e, api, video) {
                hover(true);
            }).on("seek", function(e, api, video) {
                hover(true);
                setTimeout(function() { hover(false); }, 5000);
            }).on("resume", function(e, api, video) {
                setTimeout(function() { hover(false); }, 5000);
            }).on("ready", function(e, api, video) {
                //set the title from the chomecast metadata, fade in then fade out
                $("#info #title").text(castMedia.metadata.title);

                hover(true);
            }).on("pause", function() {
                console.log("PAUSE");
            }).on("progress", function(e, api, video) {

            }).on("buffer", function(e, api, video) {

            });




        });

Custom events can be handled to manage displaying custom information sent from the sender.

Events

Download a demo