Update of jwplayer to Support HTML5

[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.

[tricer]

I'd like to bump this for HTML5 in the next release.

[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.

[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

[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.

[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.

[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.

[ytechie]

So it creates the player and everything, but it doesn't load the proper file?

[Citlali]

Yeah pretty much.

[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.

[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.

[Citlali]

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"}
      ]
      });
        }

[Richard Fearnhead]

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.

[Citlali]

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.

[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.