Youtube Play Youtube videos directly within JW Player 8



The Youtube JW Player plugin uses the Youtube API to show the Youtube videos using JW Player 7. Bitrate selection is provided by the default controlbar bitrates menu.


This demonstrates a setup to play a video from Youtube with a manually configured playlist of Youtube videos. The filetype due to a limitation with the Jw Player API is required to be set with an `mp4` extension.

The default settings menu can control quality selection, playback speed and subtitles and captions.

The plugin works with manual playlists aswell in combination with the jwplayer playlist javascript api.

Supports all Youtube api features including VR and live DVR.

Features

  • Chromeless player support with Youtube Html5 streaming.
  • Support for mobile and desktop browsers, including IOS.
  • Bitrate menu and selection support.
  • start offset configurations
  • Subtitles support using the default Jwplayer subtitles settings menu.
  • Settings menu feature for quality selection, playback speed and subtitles and captions.
  • Custom skin support provided by the Jwplayer skin styling.
  • Initial bitrate quality selection configurations.
  • Mixed playlists support between Html5 streaming and api player streaming.
  • With browsers supporting Html5 mode the rate change api is available.
  • Support for Youtube Live and DVR events.
  • Youtube 360 Video support by passing through to rotation controls.
  • Autoplay and mute workarounds for Chrome.

(Current Version 8.0.0)

Compatibility

  • JW Player 8 and above
License Options
Domain(s)

(Version 8.0.0)

License Information

The Youtube Plugin is a once off commercial license with updates and support to the Youtube plugin only. JW Player related questions and support may be provided on their forums at http://www.longtailvideo.com/support/forums/jw-player/

  • Single Domain License - Suitable for small to medium 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.
  • Single Domain Not For Profit License - Suitable for not for profit organisations.

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 try the demo before purchase or request for a 60 day site demo. Refunds will not be issued unless under some circumstances sorry for the inconvenience.

Demo

Contact for a site or local demo download.

List Of Examples

Examples

Example of Youtube videos in a playlist

Configuration





(function(jwplayer) {

    var player = jwplayer("basic").setup({
            width: "100%",
            aspectratio: "16:9",
            playbackRateControls: true,
            //preload: "none",
            autostart: false,
            playlist: [
                {  file: "http://www.youtube.com/watch?v=Vpg9yizPP_g", type: "mp4"  },
                {  file: "http://www.youtube.com/watch?v=eRsGyueVLvQ", type: "mp4" },
                {  file: "http://www.youtube.com/watch?v=R6MlUcmOul8", type: "mp4" }

            ],
            youtube: {
               //this is not required
               
            }
    });

})(window.jwplayer);

Configuration

The configuration of the Youtube provider plugin needs to be in a config object property `youtube` like so:


youtube: {
    ....
}
property / datatype default description
defaultQuality
string
default The default quality level (small, medium, large, hd720, hd1080, hd1440, hd2160, hd2880, highres). setting a default quality here will start playback with the desired default bitrate, default is set to "auto"
subtitles
boolean
false Enable Jwplayer managed external subtitles, display and menu support.
ccDisplaySettings
object
Control the css styling of the Youtube derived subtitles display. ie.

Start offsets

Start offsets can be applied to the playlist config. This will allow the player to start the video at a certain time.


     { file: "http://www.youtube.com/watch?v=Vpg9yizPP_g", start: 100, title: "Big Buck Bunny Youtube"},

Youtube Closed Caption Styling

The following properties can be configured to style the Youtube derived subtitles.


    background: "#CCCCCC"
    backgroundOpacity: 1
    charEdgeStyle: "uniform"
    color: "#fff"
    fontFamily: 4
    fontFamilyOption: "propSans"
    fontSizeIncrement: 3
    textOpacity: 1
    windowColor: "#080808"
    windowOpacity: 0

Live Events

Simply configuring the player as live will determine that it is a live stream with no duration. If the stream is configured to publish as DVR, setting the player config to dvr will enable dvr playback and to play at the current live time. For mobile browsers this will be set as live. 


   $("#player").flowplayer({
    ...
    live: true,
    ...
    });

    ...

    $("#player").flowplayer({
    ...
    dvr: true,
    ...
    });

Subtitles Example

Example demonstrating a Youtube video with subtitles populating the Cc and settings menu.

A default language code is selected or else it will be off by default. 



(function(jwplayer) {

    var player = jwplayer("subtitles").setup({
            width: "100%",
            aspectratio: "16:9",
            playbackRateControls: true,
            //preload: "none",
            autostart: false,

            playlist: [
                {  file: "http://www.youtube.com/watch?v=QRS8MkLhQmM", type: "mp4"  },
                {  file: "http://www.youtube.com/watch?v=eRsGyueVLvQ", type: "mp4" }
            ],
            youtube: {
               lang: "en",
                //subtitles: true,
                //subtitles language list filter
               // ccLangList: ["en","es","de"]
               
            }
    });

})(window.jwplayer);

Youtube Video Playlist Example

This example demonstrates using a playlist combination of Youtube and Html5 videos. 



    
(function(jwplayer) {

    jwplayer("manualVideoPlaylist").setup({
            width: "100%",
            aspectratio: "16:9",
            playbackRateControls: true,
            //preload: "none",
            autostart: false,
            playlist: [
                        {   file: "http://www.youtube.com/watch?v=Vpg9yizPP_g", type: "mp4" },
                        {
                            sources: [
                                                                    { type: "webm", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.webm"},
                                                                    { type: "mp4", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.mp4"},
                                                                    { type: "ogg", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.ogv"}
                            ]
                        },

                        {   file: "http://www.youtube.com/watch?v=MFg8mBaMoPs", type: "mp4" },
                        {
                                                                                    sources: [
                                                                                        { type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
                                                                                        { type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
                                                                                        { type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"}
                                                                                    ]
                        }
            ],
            youtube: {

            }
    });



})(window.jwplayer);

360 Video Example

This example demonstrates configuring the player for Dailymotion 360 videos and control. Enabling the `vr` config will allow mouse and touch controls to the Youtube player through Flowplayer. This is needed for VR 360 controls.