Finally here: HTML5 Player

Tutorials, tips and tricks.

Moderator: moderators

Finally here: HTML5 Player

Postby Schnip » Sat Dec 19, 2015 3:38 am

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
Last edited by Schnip on Tue Dec 29, 2015 4:11 pm, edited 1 time in total.
Schnip
 
Posts: 22
Joined: Fri Dec 12, 2014 1:57 am

Re: Finally here: HTML5 Player

Postby jeanloup » Sun Dec 20, 2015 5:56 pm

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.
jeanloup
 
Posts: 2
Joined: Sun Dec 20, 2015 5:29 pm

Re: Finally here: HTML5 Player

Postby Schnip » Tue Dec 29, 2015 4:10 pm

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.
Schnip
 
Posts: 22
Joined: Fri Dec 12, 2014 1:57 am

Re: Finally here: HTML5 Player

Postby Fivestars » Wed Dec 30, 2015 12:23 pm

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>
Fivestars
 
Posts: 3
Joined: Mon Dec 28, 2015 4:09 pm

Re: Finally here: HTML5 Player

Postby Abelone » Fri Jan 01, 2016 2:32 am

Fivestars wrote: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>
Abelone
 
Posts: 1
Joined: Wed Dec 30, 2015 12:24 pm

Re: Finally here: HTML5 Player

Postby Fivestars » Sat Jan 02, 2016 10:53 pm

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 ?
Fivestars
 
Posts: 3
Joined: Mon Dec 28, 2015 4:09 pm

Re: Finally here: HTML5 Player

Postby Schnip » Sun Jan 03, 2016 1:25 am

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.
Schnip
 
Posts: 22
Joined: Fri Dec 12, 2014 1:57 am

Re: Finally here: HTML5 Player

Postby frnx » Sun Jan 03, 2016 8:27 pm

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! :D
frnx
 
Posts: 44
Joined: Sun May 31, 2015 8:30 pm

Re: Finally here: HTML5 Player

Postby usairforce1 » Wed Feb 03, 2016 10:11 pm

Schnip wrote: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)."
usairforce1
 
Posts: 2
Joined: Wed Feb 03, 2016 9:34 pm

Re: Finally here: HTML5 Player

Postby mrfloppy » Thu Feb 04, 2016 9:09 am

usairforce1 wrote: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.
mrfloppy
 
Posts: 48
Joined: Thu Apr 16, 2015 10:12 am

Re: Finally here: HTML5 Player

Postby verm1n » Fri Feb 05, 2016 4:14 pm

Also FYI, in the new beta all the players are HTML5 so there's no need to do all this. Go get it!!!
verm1n
 
Posts: 1
Joined: Tue Jun 24, 2014 4:26 pm


Return to Tutorials

Who is online

Users browsing this forum: Bing [Bot] and 2 guests