alert omzetten naar textbox of iets in die richting - Softwareontwikkeling

maandag 17 februari 2014 11:34

Acties:

Topicstarter

Ik gebruik flowplayer (www.flowplayer.org) op mijn site.

Nu is het zo dat ik onder of boven de player graag een tekst zou hebben staan iets in de richting van "now playing ***clipnaam***.

Ik zoek me al 3 dagen lam op het internet, en inmiddels zit ik al erg dichtbij denk ik.
Ik heb het namelijk inmiddels wel werkend met een alert, maar dat is niet wat ik wil.

Eerst even de code:

HTML:

<!doctype html>
<html>
<head>
    
    <title>Simple Playlists using Javascript : Flowplayer</title>

    <!-- standalone page styling. can be removed -->
    <style>
        body{
            width:982px;
            margin:50px auto;
            font-family:sans-serif;
    color:#222;
    font-family:calibri, helvetica, arial, sans-serif;
    font-size:0.875em;
    _font-size:0.875em;
        }
        a:active {
            outline:none;
        }
        :focus { -moz-outline-style:none; }

        .palert {
            padding: 12px;
            color: black;
            background-color: #ededed;
            box-shadow: none;
        }


a:link    {color:#d53232;
text-decoration:none;
}
a:visited {color:#d53232;
text-decoration:none;
}
a:hover   {color:#d53232;
text-decoration:underline;
}
a:active  {color:#d53232;
text-decoration:none;
} 

    </style>


    <!-- flowplayer javascript component -->
    <script src="http://www.computertalk.nl/flowplayer/flowplayer-3.1.4.min.js"></script>

    </head>

<body>
    <style>
#player, #clips {
    float:left;
    margin-right:20px;
}

#clips a {
    display:block;
    margin-bottom:20px;
}
</style>


<div id="clips">
    <a href="welkom.flv">Welkom!</a>
    <a href="pc.flv">Een pc in elkaar zetten</a>
    <a href="outlook2007.flv">Outlook 2007 e-mail instellen</a>
</div>

<a
    href="welkom.flv"
    style="display:block;width:500px;height:350px;"
    id="player">
</a>
<br clear="all" />

<!-- let rest of the page float normally -->

<!-- this script block will install Flowplayer inside previous A tag -->


<script>

$f("player", "http://www.computertalk.nl/flowplayer/flowplayer-3.1.3.swf", {


    clip: {


        // use baseUrl so we can play with shorter file names
        baseUrl: 'http://www.computertalk.nl/flowplayer/video',

        // use first frame of the clip as a splash screen
        autoPlay: false,
        autoBuffering: false,

        onStart: function(clip){
            alert("Clip "+ clip.url);
        } 


    }

});

// get all links that are inside div#clips
var links = document.getElementById("clips").getElementsByTagName("a");

// loop those links and alter their click behaviour
for (var i = 0; i < links.length; i++) {
    links[i].onclick = function() {

        // play the clip specified in href- attribute with Flowplayer
        $f().play(this.getAttribute("href", 2));

        // by returning false normal link behaviour is skipped
        return false;
    }
}
</script>
</body>

</html>

Ik heb dus dit stukje toegevoegd:

code:

1 2	onStart: function(clip){ alert("Clip "+ clip.url);

Hij geeft dan een popup met Clip en dan de clipnaam.
Echter wil ik dus dat die melding niet dmv een popup komt maar gewoon boven of onder de player staat.

Wat heb ik al gedaan om het zelf op te lossen?
- Ik heb me lam gezocht op www.flowplayer.org en zowel de docs als het forum doorzocht.
- Ik heb via google gezocht of er een alternatief is voor de alert functie maar.

Na 3 dagen zoeken (en erg lam in de kop haha) dacht ik ik ga het toch eens vragen, kijken of iemand het toevallig weet.

Als er nog meer informatie nodig is dan hoor ik dat graag

[ Voor 0% gewijzigd door BtM909 op 17-02-2014 12:25 ]

Even gezellig kletsen? Check Alltalk.nl

maandag 17 februari 2014 11:36

Acties:

SandaX

Nicht Ärgern nur wundern

code:

1	document.write

maandag 17 februari 2014 11:39

Acties:

knorde

Topicstarter

SandaX schreef op maandag 17 februari 2014 @ 11:36:
code:
1
document.write

Dit lijkt deels te werken, hij geeft het nu netjes op de pagina weer maar nu werkt de player niet.
Als ik de code weer terug verander naar alert werk de player weer.

Even gezellig kletsen? Check Alltalk.nl

maandag 17 februari 2014 12:04

Acties:

Miyamoto

getElementById

i.c.m. bijv:

HTML:

1	<span id="msg"></span>

maandag 17 februari 2014 12:21

Acties:

NMe

Quia Ego Sic Dico.

knorde schreef op maandag 17 februari 2014 @ 11:39:
[...]

Dit lijkt deels te werken, hij geeft het nu netjes op de pagina weer maar nu werkt de player niet.
Als ik de code weer terug verander naar alert werk de player weer.

Dan schrijf je niet op de goeie plek of heb je een tikfout gemaakt en moet je gaan debuggen.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

maandag 17 februari 2014 15:40

Acties:

knorde

Topicstarter

Het heeft even geduurd maar we zijn eruit, ik dacht ik laat het nog even weten.
Deze code werkt:

code:

<!doctype html>
<html>
<head>
    
    <title>Simple Playlists using Javascript : Flowplayer</title>

    <!-- standalone page styling. can be removed -->
    <style>
        body{
            width:982px;
            margin:50px auto;
            font-family:sans-serif;
    color:#222;
    font-family:calibri, helvetica, arial, sans-serif;
    font-size:0.875em;
    _font-size:0.875em;
        }
        a:active {
            outline:none;
        }
        :focus { -moz-outline-style:none; }

        .palert {
            padding: 12px;
            color: black;
            background-color: #ededed;
            box-shadow: none;
        }


a:link    {color:#d53232;
text-decoration:none;
}
a:visited {color:#d53232;
text-decoration:none;
}
a:hover   {color:#d53232;
text-decoration:underline;
}
a:active  {color:#d53232;
text-decoration:none;
} 


    </style>

    
    
    <!-- flowplayer javascript component -->
    <script src="http://www.computertalk.nl/flowplayer/flowplayer-3.1.4.min.js"></script>

    </head>

<body>
    <style>
#player, #clips {
    float:left;
    margin-right:20px;
}

#clips a {
    display:block;
    margin-bottom:20px;
}
</style>


<div id="clips">
    <a href="welkom.flv">Welkom!</a>
    <a href="pc.flv">Een pc in elkaar zetten</a>
    <a href="outlook2007.flv">Outlook 2007 e-mail instellen</a>
</div>

<a
    href="welkom.flv"
    style="display:block;width:500px;height:350px;"
    id="player">
</a>
<br clear="all" />

<!-- let rest of the page float normally -->

<!-- this script block will install Flowplayer inside previous A tag -->


<script>

$f("player", "http://www.computertalk.nl/flowplayer/flowplayer-3.1.3.swf", {

    clip: {


        // use baseUrl so we can play with shorter file names
        baseUrl: 'http://www.computertalk.nl/flowplayer/video',

        // use first frame of the clip as a splash screen
        autoPlay: false,
        autoBuffering: false,
        onStart: function(clip) {
            info.innerHTML = "Speelt clip af: "+ clip.url;
        },
        onStop: function(clip) {
            info.innerHTML = "Speelt clip af: Geen";
        },
        onPause: function(clip) {
            info.innerHTML = "Speelt clip af: (pauze) "+ clip.url;
        },
        onResume: function(clip) {
            info.innerHTML = "Speelt clip af: "+ clip.url;
        }





    },

plugins: {
   controls: {
stop: true
   }
}





});


// get all links that are inside div#clips
var links = document.getElementById("clips").getElementsByTagName("a");

// loop those links and alter their click behaviour
for (var i = 0; i < links.length; i++) {
    links[i].onclick = function() {


        // play the clip specified in href- attribute with Flowplayer
        $f().play(this.getAttribute("href", 2));

        // by returning false normal link behaviour is skipped
        return false;
    }
}


</script>
<!-- info area -->
<div class="box" style="color:#00000">
    <h3>Status speler:</h3>
    <span id="info">
    Speelt clip af: Geen
    </span>
</div>

</body>

</html>

Even gezellig kletsen? Check Alltalk.nl

maandag 17 februari 2014 15:59

Acties:

Miyamoto

Nee, die werkt zo niet...

-snip-
maak dan gewoon een TR aan

[ Voor 64% gewijzigd door BtM909 op 17-02-2014 16:09 ]