Video quality selector on external player

Tutorials, tips and tricks.

Moderator: moderators

Video quality selector on external player

Postby Gyzzmo » Tue Apr 24, 2012 1:34 am

Hi !
I want to add a selector quality video in the page of my external player subsonic.
Here is the file externalPlayer and changes that I brought him. I want help to hide the quality selector when the reading media is not a video ?
In advance thank you!

________________________________________

Salut !
Je souhaite ajouter un selecteur de qualité vidéo à la page de lecteur externe de mon subsonic.
Voici le fichier externalPlayer ainsi que les modifications que je lui ai apporté. Savez vous comment je pourrais masquer le selecteur de qualité lorsque le média lu n'est pas une vidéo ?
D'avance merci !

Code: Select all
<%--@elvariable id="model" type="java.util.Map"--%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1" %>

<html>
<head>
    <%@ include file="head.jsp" %>
    <script type="text/javascript" src="<c:url value="/script/swfobject.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>

    <sub:url value="/coverArt.view" var="coverArtUrl">
        <c:if test="${not empty model.coverArt}">
            <sub:param name="path" value="${model.coverArt.path}"/>
        </c:if>
        <sub:param name="size" value="200"/>
    </sub:url>

    <meta name="og:title" content="${fn:escapeXml(model.songs[0].metaData.artist)} &mdash; ${fn:escapeXml(model.songs[0].metaData.album)}"/>
    <meta name="og:type" content="album"/>
    <meta name="og:image" content="http://${model.redirectFrom}.subsonic.org${coverArtUrl}"/>

    <script type="text/javascript">
+   function extractUrlParams(){   
+   var t = location.search.substring(1).split('&');
+   var f = [];
+   for (var i=0; i<t.length; i++){
+      var x = t[ i ].split('=');
+      f[x[0]]=x[1];
+   }
+   return f;
+}
+   function setSelectValue(selectId, value)
+   {
+      var elmt = document.getElementById(selectId);
+      for (var i = 0; i < elmt.options.length; i++)
+      {
+         if(elmt.options[i].value == value)
+         {
+            elmt.selectedIndex = i;
+            return true;
+         }
+      }
+      return false;
+   }
+   function getSelectValue(selectId)
+   {
+      var selectElmt = document.getElementById(selectId);
+      return selectElmt.options[selectElmt.selectedIndex].value;
+   }
+   function appqual(){
+      var infosurl=extractUrlParams();
+      if (!infosurl["qualite"]){
+         bitratedef="1500";
+         setSelectValue('qualite', "moyenne");
+      } else {
+         switch (infosurl["qualite"]){
+            case "basse":
+               bitratedef="380";
+               setSelectValue('qualite', "basse");
+               break;
+            case "haute":
+               bitratedef="3500";
+               setSelectValue('qualite', "haute");
+               break;
+            default:
+            case "moyenne":
+               bitratedef="1500";
+               setSelectValue('qualite', "moyenne");
+               break;
+         }
+      }
+   }
        function init() {
+      var bitratedef="1500";
            var flashvars = {
                id:"player1",
                screencolor:"000000",
                frontcolor:"<spring:theme code="textColor"/>",
                backcolor:"<spring:theme code="backgroundColor"/>",
                stretching: "exactfit",
                "playlist.position": "bottom",
                "playlist.size": 200
            };
            var params = {
                allowfullscreen:"true",
                allowscriptaccess:"always"
            };
            var attributes = {
                id:"player1",
                name:"player1"
            };
            swfobject.embedSWF("<c:url value="/flash/jw-player-5.6.swf"/>", "placeholder", "500", "500", "9.0.0", false, flashvars, params, attributes);
         appqual();
        }
        function playerReady(thePlayer) {
            var player = $("player1");
            var list = new Array();
   
        <c:forEach items="${model.songs}" var="song" varStatus="loopStatus">
        <sub:url value="/stream" var="streamUrl">
            <sub:param name="path" value="${song.path}"/>
            <sub:param name="player" value="${model.player}"/>
        </sub:url>
        <sub:url value="/coverArt.view" var="coverUrl">
           <sub:param name="size" value="500"/>
           <c:if test="${not empty model.coverArts[loopStatus.count - 1]}">
              <sub:param name="path" value="${model.coverArts[loopStatus.count - 1].path}"/>
           </c:if>
        </sub:url>

           <!-- TODO: Use video provider for aac, m4a -->
            list[${loopStatus.count - 1}] = {
-                file: "${streamUrl}",
+                file: "${streamUrl}&maxBitRate="+bitratedef,
                image: "${coverUrl}",
                title: "${fn:escapeXml(song.title)}",
                provider: "${song.video ? "video" : "sound"}",
                description: "${fn:escapeXml(song.metaData.artist)}"
            };
         
        <c:if test="${not empty song.metaData.duration}">
            list[${loopStatus.count-1}].duration = ${song.metaData.duration};
        </c:if>

        </c:forEach>

            player.sendEvent("LOAD", list);
            player.sendEvent("PLAY");
        }
    </script>
</head>

<body class="mainframe bgcolor1" style="padding-top:2em" onload="init();">

<div style="margin:auto;width:500px">
    <h1 >${model.songs[0].metaData.artist}</h1>
    <div style="float:left;padding-right:1.5em">
        <h2 style="margin:0;">${model.songs[0].metaData.album}</h2>
+      <br>
+      <label>Qualité vidéo<select name="qualite" id="qualite" onChange="window.location='?qualite='+getSelectValue('qualite');">
+         <option value="haute">Haute</option>
+         <option value="moyenne">Moyenne</option>
+         <option value="basse">Basse</option>
+      </select></label>
   </div>
    <div class="detail" style="float:right"><img src="/icons/simplify/logo.png" /></div>

    <div style="clear:both;padding-top:1em">
        <div id="placeholder">
            <a href="http://www.adobe.com/go/getflashplayer" target="_blank"><fmt:message key="playlist.getflash"/></a>
        </div>
    <div style="padding-top: 2em">${fn:escapeXml(model.share.description)}</div>
</div>
</body>
</html>
Gyzzmo
 
Posts: 5
Joined: Wed Mar 28, 2012 2:11 pm

Return to Tutorials

Who is online

Users browsing this forum: No registered users and 23 guests