Page 2 of 3

Re: Update of jwplayer to Support HTML5

PostPosted: Tue Dec 13, 2011 3:39 am
by beyondinferno
I also am dying to see this happen. flash is buggy to say the least (especially on mobile devices), and I'm tired of dealing with it! html5 support please.
Making my favorite app better all the time.

Re: Update of jwplayer to Support HTML5

PostPosted: Wed Jan 04, 2012 9:19 pm
by tricer
I'd like to bump this for HTML5 in the next release.

Re: Update of jwplayer to Support HTML5

PostPosted: Mon Jan 09, 2012 7:11 pm
by Citlali
I would actually really like this feature as well. As it is I tend to just use my phone for all my streaming purposes as I don't encode to the default MP3.

Re: Update of jwplayer to Support HTML5

PostPosted: Tue Jan 10, 2012 9:10 am
by aocarson
This would bring Subsonic to the level of unparalleled. Plex Media Server, AirPlay, several other servers include better support for video, but supporting HTML5 for streaming to mobile and non-flash platforms would be amazing!

Thank you for the great product,
aoc

Re: Update of jwplayer to Support HTML5

PostPosted: Mon Jan 23, 2012 10:36 am
by cult_hero13
I too would like this feature. I usually have no problem using Firefox with anything, but recently, any time I try to use it to stream my music, plugin-container goes crazy and begins using all of the CPU. This is directly due to Flash. That's not to excuse Firefox as it didn't have problems with Flash until some more recent updates.

Re: Update of jwplayer to Support HTML5

PostPosted: Wed Jan 25, 2012 11:50 pm
by Citlali
I've been messing around with this today and I think I have the basics figured out. You just need to download the latest jwplayer 5.8. Then add jwplayer.js to /scripts and swap out the embed code from swfobject 2.2 to jw embedder. I'll post a tutorial if I get it working.

Re: Update of jwplayer to Support HTML5

PostPosted: Thu Jan 26, 2012 5:54 pm
by Citlali
So I swapped out the embed code but I just can't get it to actually play anything. I'm not a web developer so maybe someone else can look at it and see what's missing.
Steps taken:

1. Downloaded the latest jwplayer from here:
2. Add jwplayer.js to /script (same place swfobject.js is.)
3. Add the new player.swf to /flash (I renamed it to jw-player-5.8.swf)
4. Modify playlist.jsp

Add this line:
Code: Select all
<script type="text/javascript" src="<c:url value="/script/jwplayer.js"/>"></script>


Modify function createPlayer() from this:
Code: Select all
function createPlayer() {
        var flashvars = {
            backcolor:"<spring:theme code="backgroundColor"/>",
            frontcolor:"<spring:theme code="textColor"/>",
            id:"player1"
        };
        var params = {
            allowfullscreen:"true",
            allowscriptaccess:"always"
        };
        var attributes = {
            id:"player1",
            name:"player1"
        };
        swfobject.embedSWF("<c:url value="/flash/jw-player-5.6.swf"/>", "placeholder", "340", "24", "9.0.0", false, flashvars, params, attributes);
    }


To this:
Code: Select all
function createPlayer() {
        jwplayer("placeholder").setup({
         flashplayer:"<c:url value="/flash/jw-player-5.8.swf"/>",
         id:"player1",
         backcolor:"<spring:theme code="backgroundColor"/>",
         frontcolor:"<spring:theme code="textColor"/>",
         controlbar:"bottom",
         width:"340",
         height:"24",
         modes: [
            {type: "html5"},
            {type: "flash", src:"<c:url value="/flash/jw-player-5.8.swf"/>"},
            {type: "download"}
         ]
      });
    }


I can view the html5 player and swap it out with the flash player using the modes, but actually playing the files doesn't work. I also updated videoplayer.jsp and externalplayer.jsp with similar embed code. Not sure what else I would need to change at this point.

Re: Update of jwplayer to Support HTML5

PostPosted: Thu Jan 26, 2012 10:17 pm
by ytechie
So it creates the player and everything, but it doesn't load the proper file?

Re: Update of jwplayer to Support HTML5

PostPosted: Fri Jan 27, 2012 12:19 am
by Citlali
Yeah pretty much.

Re: Update of jwplayer to Support HTML5

PostPosted: Mon Feb 06, 2012 11:09 am
by Richard Fearnhead
Any chance anyone could give us a line by line run-through of what the code in videoPlayer.jsp does to create this videoPlayer.view page would be appreciated, especially how the transcoded file location is parsed at each stage....

My apologies if I didn't explain that very well I'm still trying to understand how it all works.

:oops:

Re: Update of jwplayer to Support HTML5

PostPosted: Tue Feb 07, 2012 4:55 pm
by tyleulen007
Citlali, did you also change the videoPlayer.jsp file? My understanding is that the playlist.jsp file only affects the music player, not video.

Re: Update of jwplayer to Support HTML5

PostPosted: Tue Feb 07, 2012 6:23 pm
by Citlali
tyleulen007 wrote:Citlali, did you also change the videoPlayer.jsp file? My understanding is that the playlist.jsp file only affects the music player, not video.


Yes I did. However, I don't have any video files in my setup so I never tested it. Here is the code I put in there.

Code: Select all
function init() {

            jwplayer("placeholder").setup({
         flashplayer:"<c:url value="/flash/jw-player-5.8.swf"/>",
         id:"player1",
         skin:"<c:url value="/flash/whotube.zip"/>",
//                plugins:"metaviewer-1",
            screencolor:"000000",
            controlbar:"over",
            autostart:"false",
            bufferlength:3,
            backcolor:"<spring:theme code="backgroundColor"/>",
            frontcolor:"<spring:theme code="textColor"/>",
            provider:"video"
         width: "${model.popout ? "100%" : "600"}",
            height: "${model.popout ? "85%" : "360"}",
         modes: [
        {type: "html5"},
        {type: "flash", src:"<c:url value="/flash/jw-player-5.8.swf"/>"},
        {type: "download"}
      ]
      });
        }

Re: Update of jwplayer to Support HTML5

PostPosted: Thu Feb 09, 2012 5:31 pm
by Richard Fearnhead
Citlali wrote:
tyleulen007 wrote:Citlali, did you also change the videoPlayer.jsp file? My understanding is that the playlist.jsp file only affects the music player, not video

Yes I did. However, I don't have any video files in my setup so I never tested it. Here is the code I put in there.

.


How does that tie in with the code below it in the original file?

Code: Select all
swfobject.embedSWF("<c:url value="/flash/jw-player-5.9.swf"/>", "placeholder1", width, height, "9.0.0", false, flashvars, params, attributes);


seems to be the method the videoPlayer.jsp uses to embed the flash object on the page, and I think for html 5 we need to use jwplayer.js to initiate the player. Where I'm confused is are these two methods compatible with each other for example does jwplayer.js know what to do with 'flashvars'?
I guess my question is how is the embedding done in your modified code so that the web page doesn't inject the "Get flash player" link and instead attempts to present a html 5 player with the correct parameters (as set in flashvars, params and attributes) to that player?

A before and after of your videoPlayer.jsp file would be great as I'm not particularly sure what code to change/delete/keep/insert from the snippet you provided.

Please forgive me if I'm missing something I'm new to coding jsp, but I get the feeling you are really close and I'm just itching to get video working on my Android, which doesn't support flash.

Re: Update of jwplayer to Support HTML5

PostPosted: Thu Feb 09, 2012 7:25 pm
by Citlali
Richard Fearnhead wrote:
How does that tie in with the code below it in the original file?

Code: Select all
swfobject.embedSWF("<c:url value="/flash/jw-player-5.9.swf"/>", "placeholder1", width, height, "9.0.0", false, flashvars, params, attributes);


seems to be the method the videoPlayer.jsp uses to embed the flash object on the page, and I think for html 5 we need to use jwplayer.js to initiate the player. Where I'm confused is are these two methods compatible with each other for example does jwplayer.js know what to do with 'flashvars'?
I guess my question is how is the embedding done in your modified code so that the web page doesn't inject the "Get flash player" link and instead attempts to present a html 5 player with the correct parameters (as set in flashvars, params and attributes) to that player?

A before and after of your videoPlayer.jsp file would be great as I'm not particularly sure what code to change/delete/keep/insert from the snippet you provided.

Please forgive me if I'm missing something I'm new to coding jsp, but I get the feeling you are really close and I'm just itching to get video working on my Android, which doesn't support flash.


Here is the entire before and after.

videoplayer.jsp
Code: Select all
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1" %>

<html>
<head>
    <%@ include file="head.jsp" %>

    <sub:url value="videoPlayer.view" var="baseUrl"><sub:param name="path" value="${model.video.path}"/></sub:url>
    <sub:url value="main.view" var="backUrl"><sub:param name="path" value="${model.video.parent.path}"/></sub:url>

    <sub:url value="/stream" var="streamUrl">
        <sub:param name="path" value="${model.video.path}"/>
    </sub:url>

    <script type="text/javascript" src="<c:url value="/script/swfobject.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
    <script type="text/javascript" language="javascript">

        var player;
        var position;
        var maxBitRate = ${model.maxBitRate};
        var timeOffset = ${model.timeOffset};

        function init() {

            var flashvars = {
                id:"player1",
                skin:"<c:url value="/flash/whotube.zip"/>",
//                plugins:"metaviewer-1",
                screencolor:"000000",
                controlbar:"over",
                autostart:"false",
                bufferlength:3,
                backcolor:"<spring:theme code="backgroundColor"/>",
                frontcolor:"<spring:theme code="textColor"/>",
                provider:"video"
            };
            var params = {
                allowfullscreen:"true",
                allowscriptaccess:"always"
            };
            var attributes = {
                id:"player1",
                name:"player1"
            };

            var width = "${model.popout ? '100%' : '600'}";
            var height = "${model.popout ? '85%' : '360'}";
            swfobject.embedSWF("<c:url value="/flash/jw-player-5.6.swf"/>", "placeholder1", width, height, "9.0.0", false, flashvars, params, attributes);
        }

        function playerReady(thePlayer) {
            player = $("player1");
            player.addModelListener("TIME", "timeListener");

        <c:if test="${not (model.trial and model.trialExpired)}">
            play();
        </c:if>
        }

        function play() {
            var list = new Array();
            list[0] = {
                file:"${streamUrl}&maxBitRate=" + maxBitRate + "&timeOffset=" + timeOffset + "&player=${model.player}",
                duration:${model.duration} - timeOffset,
                provider:"video"
            };
            player.sendEvent("LOAD", list);
            player.sendEvent("PLAY");
        }

        function timeListener(obj) {
            var newPosition = Math.round(obj.position);
            if (newPosition != position) {
                position = newPosition;
                updatePosition();
            }
        }

        function updatePosition() {
            var pos = getPosition();

            var minutes = Math.round(pos / 60);
            var seconds = pos % 60;

            var result = minutes + ":";
            if (seconds < 10) {
                result += "0";
            }
            result += seconds;
            $("position").innerHTML = result;
        }

        function changeTimeOffset() {
            timeOffset = $("timeOffset").getValue();
            play();
        }

        function changeBitRate() {
            maxBitRate = $("maxBitRate").getValue();
            timeOffset = getPosition();
            play();
        }

        function popout() {
            var url = "${baseUrl}&maxBitRate=" + maxBitRate + "&timeOffset=" + getPosition() + "&popout=true";
            popupSize(url, "video", 600, 400);
            window.location.href = "${backUrl}";
        }

        function popin() {
            window.opener.location.href = "${baseUrl}&maxBitRate=" + maxBitRate + "&timeOffset=" + getPosition();
            window.close();
        }

        function getPosition() {
            return parseInt(timeOffset) + parseInt(position);
        }

    </script>
</head>

<body class="mainframe bgcolor1" style="padding-bottom:0.5em" onload="init();">
<c:if test="${not model.popout}">
    <h1>${model.video.title}</h1>
</c:if>

<c:if test="${model.trial}">
    <fmt:formatDate value="${model.trialExpires}" dateStyle="long" var="expiryDate"/>

    <p class="warning" style="padding-top:1em">
        <c:choose>
            <c:when test="${model.trialExpired}">
                <fmt:message key="networksettings.trialexpired"><fmt:param>${expiryDate}</fmt:param></fmt:message>
            </c:when>
            <c:otherwise>
                <fmt:message
                        key="networksettings.trialnotexpired"><fmt:param>${expiryDate}</fmt:param></fmt:message>
            </c:otherwise>
        </c:choose>
    </p>
</c:if>


<div id="wrapper" style="padding-top:1em">
    <div id="placeholder1"><a href="http://www.adobe.com/go/getflashplayer" target="_blank"><fmt:message key="playlist.getflash"/></a></div>
</div>

<div style="padding-top:0.7em;padding-bottom:0.7em">

    <span id="position" style="padding-right:0.5em">0:00</span>
    <select id="timeOffset" onchange="changeTimeOffset();" style="padding-left:0.25em;padding-right:0.25em;margin-right:0.5em">
        <c:forEach items="${model.skipOffsets}" var="skipOffset">
            <c:choose>
                <c:when test="${skipOffset.value - skipOffset.value mod 60 eq model.timeOffset - model.timeOffset mod 60}">
                    <option selected="selected" value="${skipOffset.value}">${skipOffset.key}</option>
                </c:when>
                <c:otherwise>
                    <option value="${skipOffset.value}">${skipOffset.key}</option>
                </c:otherwise>
            </c:choose>
        </c:forEach>
    </select>

    <select id="maxBitRate" onchange="changeBitRate();" style="padding-left:0.25em;padding-right:0.25em;margin-right:0.5em">
        <c:forEach items="${model.bitRates}" var="bitRate">
            <c:choose>
                <c:when test="${bitRate eq model.maxBitRate}">
                    <option selected="selected" value="${bitRate}">${bitRate} Kbps</option>
                </c:when>
                <c:otherwise>
                    <option value="${bitRate}">${bitRate} Kbps</option>
                </c:otherwise>
            </c:choose>
        </c:forEach>
    </select>
</div>

<c:choose>
    <c:when test="${model.popout}">
        <div class="back"><a href="javascript:popin();"><fmt:message key="common.back"/></a></div>
    </c:when>
    <c:otherwise>
        <div class="back" style="float:left;padding-right:2em"><a href="${backUrl}"><fmt:message key="common.back"/></a></div>
        <div class="forward" style="float:left;"><a href="javascript:popout();"><fmt:message key="videoPlayer.popout"/></a></div>
    </c:otherwise>
</c:choose>

</body>
</html>


Modified videoplayer.jsp
Code: Select all
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1" %>

<html>
<head>
    <%@ include file="head.jsp" %>

    <sub:url value="videoPlayer.view" var="baseUrl"><sub:param name="path" value="${model.video.path}"/></sub:url>
    <sub:url value="main.view" var="backUrl"><sub:param name="path" value="${model.video.parent.path}"/></sub:url>

    <sub:url value="/stream" var="streamUrl">
        <sub:param name="path" value="${model.video.path}"/>
    </sub:url>

    <script type="text/javascript" src="<c:url value="/script/jwplayer.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
    <script type="text/javascript" language="javascript">

        var player;
        var position;
        var maxBitRate = ${model.maxBitRate};
        var timeOffset = ${model.timeOffset};

        function init() {

            jwplayer("placeholder").setup({
         flashplayer:"<c:url value="/flash/jw-player-5.8.swf"/>",
         id:"player1",
         skin:"<c:url value="/flash/whotube.zip"/>",
//                plugins:"metaviewer-1",
            screencolor:"000000",
            controlbar:"over",
            autostart:"false",
            bufferlength:3,
            backcolor:"<spring:theme code="backgroundColor"/>",
            frontcolor:"<spring:theme code="textColor"/>",
            provider:"video"
         width: "${model.popout ? "100%" : "600"}",
            height: "${model.popout ? "85%" : "360"}",
         modes: [
        {type: "html5"},
        {type: "flash", src:"<c:url value="/flash/jw-player-5.8.swf"/>"},
        {type: "download"}
      ]
      });
        }

        function playerReady(thePlayer) {
            player = $("player1");
            player.addModelListener("TIME", "timeListener");

        <c:if test="${not (model.trial and model.trialExpired)}">
            play();
        </c:if>
        }

        function play() {
            var list = new Array();
            list[0] = {
                file:"${streamUrl}&maxBitRate=" + maxBitRate + "&timeOffset=" + timeOffset + "&player=${model.player}",
                duration:${model.duration} - timeOffset,
                provider:"video"
            };
            player.sendEvent("LOAD", list);
            player.sendEvent("PLAY");
        }

        function timeListener(obj) {
            var newPosition = Math.round(obj.position);
            if (newPosition != position) {
                position = newPosition;
                updatePosition();
            }
        }

        function updatePosition() {
            var pos = getPosition();

            var minutes = Math.round(pos / 60);
            var seconds = pos % 60;

            var result = minutes + ":";
            if (seconds < 10) {
                result += "0";
            }
            result += seconds;
            $("position").innerHTML = result;
        }

        function changeTimeOffset() {
            timeOffset = $("timeOffset").getValue();
            play();
        }

        function changeBitRate() {
            maxBitRate = $("maxBitRate").getValue();
            timeOffset = getPosition();
            play();
        }

        function popout() {
            var url = "${baseUrl}&maxBitRate=" + maxBitRate + "&timeOffset=" + getPosition() + "&popout=true";
            popupSize(url, "video", 600, 400);
            window.location.href = "${backUrl}";
        }

        function popin() {
            window.opener.location.href = "${baseUrl}&maxBitRate=" + maxBitRate + "&timeOffset=" + getPosition();
            window.close();
        }

        function getPosition() {
            return parseInt(timeOffset) + parseInt(position);
        }

    </script>
</head>

<body class="mainframe bgcolor1" style="padding-bottom:0.5em" onload="init();">
<c:if test="${not model.popout}">
    <h1>${model.video.title}</h1>
</c:if>

<c:if test="${model.trial}">
    <fmt:formatDate value="${model.trialExpires}" dateStyle="long" var="expiryDate"/>

    <p class="warning" style="padding-top:1em">
        <c:choose>
            <c:when test="${model.trialExpired}">
                <fmt:message key="networksettings.trialexpired"><fmt:param>${expiryDate}</fmt:param></fmt:message>
            </c:when>
            <c:otherwise>
                <fmt:message
                        key="networksettings.trialnotexpired"><fmt:param>${expiryDate}</fmt:param></fmt:message>
            </c:otherwise>
        </c:choose>
    </p>
</c:if>


<div id="wrapper" style="padding-top:1em">
    <div id="placeholder1"><a href="http://www.adobe.com/go/getflashplayer" target="_blank"><fmt:message key="playlist.getflash"/></a></div>
</div>

<div style="padding-top:0.7em;padding-bottom:0.7em">

    <span id="position" style="padding-right:0.5em">0:00</span>
    <select id="timeOffset" onchange="changeTimeOffset();" style="padding-left:0.25em;padding-right:0.25em;margin-right:0.5em">
        <c:forEach items="${model.skipOffsets}" var="skipOffset">
            <c:choose>
                <c:when test="${skipOffset.value - skipOffset.value mod 60 eq model.timeOffset - model.timeOffset mod 60}">
                    <option selected="selected" value="${skipOffset.value}">${skipOffset.key}</option>
                </c:when>
                <c:otherwise>
                    <option value="${skipOffset.value}">${skipOffset.key}</option>
                </c:otherwise>
            </c:choose>
        </c:forEach>
    </select>

    <select id="maxBitRate" onchange="changeBitRate();" style="padding-left:0.25em;padding-right:0.25em;margin-right:0.5em">
        <c:forEach items="${model.bitRates}" var="bitRate">
            <c:choose>
                <c:when test="${bitRate eq model.maxBitRate}">
                    <option selected="selected" value="${bitRate}">${bitRate} Kbps</option>
                </c:when>
                <c:otherwise>
                    <option value="${bitRate}">${bitRate} Kbps</option>
                </c:otherwise>
            </c:choose>
        </c:forEach>
    </select>
</div>

<c:choose>
    <c:when test="${model.popout}">
        <div class="back"><a href="javascript:popin();"><fmt:message key="common.back"/></a></div>
    </c:when>
    <c:otherwise>
        <div class="back" style="float:left;padding-right:2em"><a href="${backUrl}"><fmt:message key="common.back"/></a></div>
        <div class="forward" style="float:left;"><a href="javascript:popout();"><fmt:message key="videoPlayer.popout"/></a></div>
    </c:otherwise>
</c:choose>

</body>
</html>


You'll notice that all I'm really doing is swapping out the embed code from flashvars to jwplayer. Documentation for the updated embed code is on their website.

http://www.longtailvideo.com/support/jw ... e-selected

I'm not a coder by any means so I'm sure there is additional code that needs to be updated. I was also primarily testing with playlist.jsp as I do not have video on my setup.

Re: Update of jwplayer to Support HTML5

PostPosted: Fri Feb 10, 2012 9:25 pm
by Richard Fearnhead
Thanks Citlali,

I'm going to have a look at testing out and or modifying your code to get this to work, when I can find some time.

I do have some video files I can test, so I will let you know the results of those tests in due course.