How to install JW Player 7.1

Question

I downloaded the version "JW Player 7 (Self-Hosted)".

Then I copied the uncompressed folder jwplayer-7.1.0 to /home/vmg/public_html/. It contains the following files and folders:

1.js
jwplayer.flash.swf
jwplayer.js
provider.cast.js
provider.shaka.js
provider.youtube.js
skins/

I've saved a video (video.mp4) and a image (image.jpg) in the folder jwplayer-7.1.0. Next I edited the index.html contained in the folder public_html/:

<!DOCTYPE html>
<html>
<head>
    <!-- JS jwplayer 6.8 -->
    <script type="text/javascript" src="jwplayer-7.1.0/jwplayer.js"></script>
    <!-- JWplayer Licence - put your licence here -->
    <script type="text/javascript">jwplayer.key="CKjOe06GxAOe3Dj9NaWPCQKtqvqQdyFV8z9wsg==";</script>
</head>
<body>
    <div id="video">Loading the player...</div>
    <script type="text/javascript">
    var playerInstance = jwplayer("video");
    playerInstance.setup({
        file: "jwplayer-7.1.0/video.mp4",
            image: "jwplayer-7.1.0/image.jpg",
            width: 384,
            height: 216,
            title: 'Basic Video Embed',
            description: 'A video with a basic title and description!'
    });
    </script>
</body>
</html>

I open this file on Chrome and it works.

But I want to work with streaming content and I saw this link http://doc.streamroot.io/doc/latest/en/Front_end_player_configuration/Players_Instructions/JWplayer.html for a previous version of this player. It seems to work with MPEG-DASH manifests and HLS playlists.

With the index.html that appears in the mentioned link using: <script type="text/javascript" src="jwplayer-7.1.0/jwplayer.js"></script>, the player doesn't work.

<!DOCTYPE html>
<html>
<head>
    <!-- JS jwplayer 6.8 -->
    <script type="text/javascript" src="jwplayer-7.1.0/jwplayer.js"></script>
    <!-- JWplayer Licence - put your licence here -->
    <script type="text/javascript">jwplayer.key="....";</script>

    <!-- Streamroot API (needs to be defined before the streamroot wrapper)-->
    <script src="http://files.streamroot.io/release/1.1/api.js"></script>

    <!-- Streamroot wrapper and loader -->
    <script type="text/javascript">
            streamrootWrapperSrc = "http://files.streamroot.io/release/1.1/wrappers/jwplayer/6.8/streamroot.wrapper.min.js";
    </script>
    <script type="text/javascript" src="http://files.streamroot.io/release/1.1/wrappers/jwplayer/6.8/srloader.js"></script>
</head>
<body>
    <div id="streamrootPlayer" class="video">
    </div>
    <script>
        jwplayer("streamrootPlayer").setup({
            // Streamroot manifest source  to place in the playlist
            playlist : [{
                sources: [
                { // HLS LIVE Manifest - works with Streamroot HTML5 and Flash modules.
                    file: "http://wowza.streamroot.io:1935/live/stream1/playlist.m3u8",
                    type: "application/x-mpegurl"
                },
                { // MPEG-DASH VOD Manifest - works with Streamroot HTML5 and Flash modules.
                        file: "http://wowza.streamroot.io:1935/vod/snow.mp4/manifest.mpd",
                     type: "video/dash"

                },/* { // RTMP LIVE Stream - if needed for fallbacks
                    file: "rtmp://wowza.streamroot.io:1935/live",
                    type: "video/rtmp"
                }, { // MP4 VOD Stream - if needed for fallbacks
                    file: "http://content.jwplatform.com/videos/HkauGhRi-640.mp4",
                    type: "video/mp4"
                }*/
                ]
            }],
            logo : {
                file : "logo.jpg",
                hide : true,
                link : ""
            },
            abouttext : "Your About Text",
            height: 360,
            width: 640,
            // enable streamroot playback and wrapper
            primary: "streamroot",
            streamrootplayer: "http://files.streamroot.io/release/1.1/wrappers/jwplayer/6.8/jwplayer.streamroot.js",
            srflashplayer : "http://files.streamroot.io/release/1.1/wrappers/jwplayer/6.8/jwplayer.srflash.swf",

            // streamroot API options
            sr_options: {
                ID_CLIENT : "ry-1t3stst12",
                TRACKER_URL:"http://tracker.streamroot.io:80"
            }
        });
    </script>
</body>
</html>

I suppose these Streamroot libs aren't suitable for jwplayer 7.1, but they aren't included in the downloaded folder. What am I doing wrong?

Thanks you very much!

You don't really need special Streamroot libs for JW Player. As long as you are using a Premium edition of the JW Player, the streams should work (HLS and DASH). If you are using a free version of the JW Player, the RTMP stream should work fine. — emaxsaun

Clément de Coligny Clément de Coligny · Accepted Answer · 2015-10-28T14:51:26

This Streamroot doc page is outdated. Check this one.

Try the above snippet. More info HERE.

<!DOCTYPE html>
    <html>
    <head>
    <script src="//p.jwpcdn.com/6/8/jwplayer.js"></script>
    <script>jwplayer.key="CKjOe06GxAOe3Dj9NaWPCQKtqvqQdyFV8z9wsg==";</script>
    <script src="//files.streamroot.io/release/latest/api.js"></script>
    <script src="//files.streamroot.io/release/latest/wrappers/jwplayer/6.8/streamroot.wrapper.min.js"></script>
    </head>
    <body>
        <div id="streamrootPlayer" class="video"></div>
    <script>
    jwplayer("streamrootPlayer").setup({
        playlist : [
            { // PLACE YOUR MANIFEST URL HERE
                file: "http://media.streamroot.io/dash/examples/snow15/snowboard1_720p_dash.mpd",
                type: "video/dash"
            },
            { // MP4 VOD Stream - fallback for old browsers and devices
                file: "http://content.jwplatform.com/videos/HkauGhRi-640.mp4",
                type: "video/mp4"
            }
        ],
        logo: {
            hide: true,
            file: ""
        },
        autostart: 1,
        streamrootplayer: "http://files.streamroot.io/release/latest/wrappers/jwplayer/6.8/jwplayer.streamroot.js",
        srflashplayer : "http://files.streamroot.io/release/latest/wrappers/jwplayer/6.8/jwplayer.srflash.swf",
        sr_options: {
            ID_CLIENT : "ry-1t3stst12",
            DEBUG: true    
        }
    });
    </script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.4.6/rickshaw.min.js"> </script>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.4.6/rickshaw.min.css">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"> </script>
        <script src="http://files.streamroot.io/release/latest/scripts/p2pGraph.js"></script>
    </body>
    </html>

How to install JW Player 7.1

1 Answers