Finally here: HTML5 Player

[Schnip]

Hey Guys,



I have been waiting ages for a properly implemented HTML5 Player. Lets face it: Flash sucks!


After the feature had been requested several times by different users without being implemented I decided to do it myself.


Screenshots:






Its a fairly straightforward change and requires only changing one file:


/var/subsonic/jetty/1337/webapp/WEB-INF/jsp/playQueue.jsp


I used the official .deb package on my system (debian). On your system it might reside in another location.


1. Replace this line:

Code: Select all

<script type="text/javascript" src="<c:url value="/script/jw-player-5.10.js"/>"></script>

with this line:

Code: Select all

<script type="text/javascript" src="https://content.jwplatform.com/libraries/2bSyTMFk.js"></script>

That link is a "cloud-hosted" JWPlayer 7 including a free license. I signed up for this player specifically for demonstration purposes on this forum. You might want to consider signing up yourself on https://www.jwplayer.com and getting your own personal link.


2. Replace this line:

Code: Select all

<c:if test="${model.player.web}">createPlayer();</c:if>

With this one:

Code: Select all

<c:if test="${model.player.web}">createPlayerCallback();</c:if>

3. Replace the complete

Code: Select all

function createPlayer()
{
[...]
}

with:

Code: Select all

    function createPlayerCallback() {
        playQueueService.getPlayQueue(createPlayer);
    }

    function createPlayer(playQueue) {
        song = playQueue.entries[0];
        jwplayer("jwplayer").setup({
            file: song.streamUrl,
            type: song.format,
            duration: song.duration,
            skin: "five",
            height: 33,
            width: 350
        });

        jwplayer().onComplete(function() {onNext(repeatEnabled)});
    }


4. Replace the complete

Code: Select all

function skip(index, position) {
[...]
}


with this:

Code: Select all

    function skip(index, position) {
        if (index < 0 || index >= songs.length) {
            return;
        }

        var song = songs[index];
        currentStreamUrl = song.streamUrl;
        updateCurrentImage();

        if (CastPlayer.castSession) {
            CastPlayer.loadCastMedia(song, position);
        } else {
            jwplayer().load({
                file: song.streamUrl,
                type: song.format,
                duration: song.duration
            });
            jwplayer().play();
            console.log(song.streamUrl);
        }

        updateWindowTitle(song);

        <c:if test="${model.notify}">
        showNotification(song);
        </c:if>
    }


5. Search for this:

Code: Select all

<div id="jwplayer">[...]</div>

and remove everything inside the div so that it looks like this:

Code: Select all

<div id="jwplayer"></div>

6. Delete all Webplayers in the subsonic settings menu.


That's it you successfully replaced the flash player with the current html5 release of jwplayer!


Please be aware that there is a little incompatibility initially when spawning a new player. It has to do with how the new jwplayer handles media files. This causes the player to not spawn immediately. As a workaround just play 1 or 2 files and refresh the page in your browser. The player should appear immediately.

Have fun with your new HTML5 non-flash Player!


Yours sincerely,
Schnip

[jeanloup]

Hello, thanks a lot, it works like charm with audio file, i don't test video.
I want to ask you something; there's another flash player in Subsonic ie : when you share files it generates a flash player, this is a real problem when you share to smartphone, because it doesn't work on Android player. Could you show how we can change this player to a HTML5 player. Thanks for your contribution, and sorry for my bad english.

[Schnip]

Hey jeanloup,


I know what player you mean. Unfortunately I don't use that feature at all and my time is limited. I can't promise you that I would implement it. Maybe if there is more resonance. But as of now I don't really see anybody even caring too much about the "normal" player with HTML5.

Furthermore, the player should work for Video. I haven't tested that yet, as I use subsonic solely to play music.

[Fivestars]

Flawless tuto, many thanks!

Little addition for those who want to host their jwplayer locally, you will need to specify your license number.
You can get this number at https://dashboard.jwplayer.com

At step 1, after replacing line:

Code: Select all

<script type="text/javascript" src="<c:url value="/script/jw-player-5.10.js"/>"></script>

simply add the following just below (replace with your own license key):

Code: Select all

<script>jwplayer.key="azdCdSI6zNGUkizr+90+o01YYKBazd";</script>

[Abelone]

Flawless tuto, many thanks!

Little addition for those who want to host their jwplayer locally, you will need to specify your license number.
You can get this number at https://dashboard.jwplayer.com

At step 1, after replacing line:

Code: Select all

<script type="text/javascript" src="<c:url value="/script/jw-player-5.10.js"/>"></script>

simply add the following just below (replace with your own license key):

Code: Select all

<script>jwplayer.key="azdCdSI6zNGUkizr+90+o01YYKBazd";</script>

I have my key placed per your suggestion but the video player says the key is missing.

Code: Select all

  <link type="text/css" rel="stylesheet" href="<c:url value="/script/webfx/luna.css"/>">
    <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/jwplayer.js"/>"></script>
   <script>jwplayer.key="KdFaTHISISMYKEYHEREl_are the  script enclosures done right";</script>

[Fivestars]

Hi Abelone,

I have double-checked my own file, I cannot find any differences with the few lines you have pasted here above.

Just to be sure, have you performed a restart of subsonic after having modified playerQueue.jsp ?

[Schnip]

You actually dont have to put your license key in the html code if you use your own cloud hosted player. The cloud hosted player bears the license in your unique filename i.e. 2bSyTMFk.js. So you just have to follow my tutorial and replace my cloud hosted player link with yours.

If you want to do selfhosting (which will require embedding the license in the html code using javascript) you have to replace this file /script/jwplayer.js with the new jwplayer7 javascript (which can be downloaded from the member area at jwplayer.org) and add the <script>LICENSE</script> to your html code as you described.

[frnx]

FYI, one of the last commits on the SVN repo added JWPlayer 7, so at this point it's fairly certain that it'll be available by default on the next version!

[usairforce1]

Hey Guys,



I have been waiting ages for a properly implemented HTML5 Player. Lets face it: Flash sucks!


After the feature had been requested several times by different users without being implemented I decided to do it myself.


Screenshots:






Its a fairly straightforward change and requires only changing one file:


/var/subsonic/jetty/1337/webapp/WEB-INF/jsp/playQueue.jsp


I used the official .deb package on my system (debian). On your system it might reside in another location.


1. Replace this line:

Code: Select all

<script type="text/javascript" src="<c:url value="/script/jw-player-5.10.js"/>"></script>

with this line:

Code: Select all

<script type="text/javascript" src="https://content.jwplatform.com/libraries/2bSyTMFk.js"></script>

That link is a "cloud-hosted" JWPlayer 7 including a free license. I signed up for this player specifically for demonstration purposes on this forum. You might want to consider signing up yourself on https://www.jwplayer.com and getting your own personal link.


2. Replace this line:

Code: Select all

<c:if test="${model.player.web}">createPlayer();</c:if>

With this one:

Code: Select all

<c:if test="${model.player.web}">createPlayerCallback();</c:if>

3. Replace the complete

Code: Select all

function createPlayer()
{
[...]
}

with:

Code: Select all

    function createPlayerCallback() {
        playQueueService.getPlayQueue(createPlayer);
    }

    function createPlayer(playQueue) {
        song = playQueue.entries[0];
        jwplayer("jwplayer").setup({
            file: song.streamUrl,
            type: song.format,
            duration: song.duration,
            skin: "five",
            height: 33,
            width: 350
        });

        jwplayer().onComplete(function() {onNext(repeatEnabled)});
    }


4. Replace the complete

Code: Select all

function skip(index, position) {
[...]
}


with this:

Code: Select all

    function skip(index, position) {
        if (index < 0 || index >= songs.length) {
            return;
        }

        var song = songs[index];
        currentStreamUrl = song.streamUrl;
        updateCurrentImage();

        if (CastPlayer.castSession) {
            CastPlayer.loadCastMedia(song, position);
        } else {
            jwplayer().load({
                file: song.streamUrl,
                type: song.format,
                duration: song.duration
            });
            jwplayer().play();
            console.log(song.streamUrl);
        }

        updateWindowTitle(song);

        <c:if test="${model.notify}">
        showNotification(song);
        </c:if>
    }


5. Search for this:

Code: Select all

<div id="jwplayer">[...]</div>

and remove everything inside the div so that it looks like this:

Code: Select all

<div id="jwplayer"></div>

6. Delete all Webplayers in the subsonic settings menu.


That's it you successfully replaced the flash player with the current html5 release of jwplayer!


Please be aware that there is a little incompatibility initially when spawning a new player. It has to do with how the new jwplayer handles media files. This causes the player to not spawn immediately. As a workaround just play 1 or 2 files and refresh the page in your browser. The player should appear immediately.

Have fun with your new HTML5 non-flash Player!


Yours sincerely,
Schnip

Im kinda new to html and java script, what do u mean by "the official .deb package on my system (debian)."

[mrfloppy]

Im kinda new to html and java script, what do u mean by "the official .deb package on my system (debian)."

He used the official .deb file to install Subsonic.
It has nothing to do with the html or java files, expect the location can be slightly different.

[verm1n]

Also FYI, in the new beta all the players are HTML5 so there's no need to do all this. Go get it!!!