[html/javascript] Problema con codice javascript [Archivio]

cos1950

19-05-2016, 10:30

Sto testando un frammento di codice html/javascript che dovrebbe consentire la scelta del filmato (ogg o altro) da vedere in una finestra... ho messo insieme un po' di codice, ma non fa la cosa giusta perchè dopo il primo clic, ai successivi clic fa vedere sempre lo stesso filmato. Ecco il codice usato

<html>
<head>
<script type="text/javascript">
var video;
function play_video(video_url)
{
video = document.getElementById('video');var source = document.createElement('source');
source.setAttribute('src', video_url);
video.appendChild(source);video.load();
video.play();
return 0;
}
</script>
</head>
<body>

<table><td><video id="video" poster="img_dam/dam070.jpg" controls style="position: absolute; top: 10px; left: 200px;
width:350px; height:auto; border: 4px solid green;
border-radius: 10px; box-shadow: 6px 6px 6px gray"/>
</video> </td><td>
<br>
<ul>
<li> <a href="javascript:void(0);" onclick="play_video('video/29Maggio2006.ogv')"> video Caprera </a>
<li> <a href="javascript:void(0);" onclick="play_video('video/DaMariaGraziaPerDamiano.ogv')"> video Maria Grazia </a>

</ul>
</table>
</body>
</html>

Non riesco a capire come fare per eliminar l'inconveniente

OoZic

19-05-2016, 12:13

Ciao,

qualche consiglio:
- metti sempre il codice all'interno del [ CODE ] cosi da esssere formattato

<html>
<head>
<script type="text/javascript">
var video;
function play_video(video_url)
{
video = document.getElementById('video');var source = document.createElement('source');
source.setAttribute('src', video_url);
video.appendChild(source);video.load();
video.play();
return 0;
}
</script>
</head>
<body>

<table><td><video id="video" poster="img_dam/dam070.jpg" controls style="position: absolute; top: 10px; left: 200px;
width:350px; height:auto; border: 4px solid green;
border-radius: 10px; box-shadow: 6px 6px 6px gray"/>
</video> </td><td>
<br>
<ul>
<li> <a href="javascript:void(0);" onclick="play_video('video/29Maggio2006.ogv')"> video Caprera </a>
<li> <a href="javascript:void(0);" onclick="play_video('video/DaMariaGraziaPerDamiano.ogv')"> video Maria Grazia </a>

</ul>
</table>
</body>
</html>

- usa qualche tool online tipo JSFIDDLE o JSBIN per poter avere un anteprima e rendere piu' semplice per chi ti deve aiutare a trovare i problemi

Qui c'e' la soluzione commentata usando jQuery che mi ha semplificato la vita
https://jsfiddle.net/pvvsm4xe/

Come esercizio potresti provare a rifarla usando vanilla JS come stavi facendo :)

Ciao

cos1950

19-05-2016, 13:44

Ciao,

qualche consiglio:
- metti sempre il codice all'interno del [ CODE ] cosi da esssere formattato

<html>
<head>
<script type="text/javascript">
var video;
function play_video(video_url)
{
video = document.getElementById('video');var source = document.createElement('source');
source.setAttribute('src', video_url);
video.appendChild(source);video.load();
video.play();
return 0;
}
</script>
</head>
<body>

<table><td><video id="video" poster="img_dam/dam070.jpg" controls style="position: absolute; top: 10px; left: 200px;
width:350px; height:auto; border: 4px solid green;
border-radius: 10px; box-shadow: 6px 6px 6px gray"/>
</video> </td><td>
<br>
<ul>
<li> <a href="javascript:void(0);" onclick="play_video('video/29Maggio2006.ogv')"> video Caprera </a>
<li> <a href="javascript:void(0);" onclick="play_video('video/DaMariaGraziaPerDamiano.ogv')"> video Maria Grazia </a>

</ul>
</table>
</body>
</html>

- usa qualche tool online tipo JSFIDDLE o JSBIN per poter avere un anteprima e rendere piu' semplice per chi ti deve aiutare a trovare i problemi

Qui c'e' la soluzione commentata usando jQuery che mi ha semplificato la vita
https://jsfiddle.net/pvvsm4xe/

Come esercizio potresti provare a rifarla usando vanilla JS come stavi facendo :)

Ciao

Ciao... ehm, non ho capito molto...
La parte di jQuery va in uno script da mettere nello head?
il codice va utilizzato così com'è? Bisogna caricare qualche libreria jQuery?
La parte di html in JSFiddle è monca... in ogni caso il codice con me non funziona, probabilmente perchè faccio cavolate nei miei arrangiamenti... poi come data-video-url va bene un percorso (path) sul pc? Non mi funziona neanche l'esempio su JSFiddle...

OoZic

19-05-2016, 13:57

Che browser usi? Jsfiddle su chrome mi funziona.

Jquery puoi caricarlo alla fine della tua pagina prima della chiusura del body e prima del tuo script. Il percorso non va bene a meno che non ci sia un web server che serve quella risorsa.

Sent from my iPhone using Tapatalk

cos1950

19-05-2016, 14:11

Che browser usi? Jsfiddle su chrome mi funziona.

Jquery puoi caricarlo alla fine della tua pagina prima della chiusura del body e prima del tuo script. Il percorso non va bene a meno che non ci sia un web server che serve quella risorsa.

Sent from my iPhone using Tapatalk

Oh yes... uso firefox e mp4 non è nativo, ma ci vorrebbe ogg. Ho provato con chrome e funge :)

cos1950

20-05-2016, 09:41

Altro problema

<p><table>
<td><img src="images/marge_comment.png" id="mc" style="display:none"></td>
<td>

<img src=images/commenti.png usemap="#commenti">
<map name="commenti">
<area shape="rect" coords="0,0,68, 12"
href="javascript:void(0);" onclick="
if(document.getElementById('mc').style.display == none) document.getElementById('mc').style.display=yes;
else document.getElementById('mc').style.display=none">
</area></map>
</table></p><br>

immagine cliccabile, mediante tag <area> che dovrebbe settare visibilità di altra immagine adiacente.

Non funziona. Dove sbaglio?

OoZic

21-05-2016, 09:55

non ti conviene usare onclick="" sull'element specialmente se hai un po di cose da fare.

metti tutto in uno script separato o infondo alla pagina e fatti aiutare da jQuery

cos1950

21-05-2016, 11:24

non ti conviene usare onclick="" sull'element specialmente se hai un po di cose da fare.

metti tutto in uno script separato o infondo alla pagina e fatti aiutare da jQuery

E' che jQuery lo mastico davvero molto male, ancora... mi puoi suggerire un buon manuale in italiano? Io insegno e constato purtroppo che quelli che scrivono manuali in genere non sanno cosa significhi costruire un percorso didattico esaustivo e chiaro, partendo inconsapevolmente dalle loro conoscenze acquisite date per scontate...
mi potresti abbozzare una soluzione?

i progressi da me fatti nella costruzione del sito a cui tutto questo lavorio è destinato:

http://www.mariafrancescapes.it/Damianforever/first.html

Damiano era mio figlio :rolleyes:

OoZic

21-05-2016, 11:50

mi spiace ... :(

Ti potrei consigliare di provare questo percorso, in 3 ore sono sicuro capirai un po meglio.
https://www.codecademy.com/learn/jquery

Se trovi dei concetti che non ti sono chiari allora probabilmente vorrai ripassare javascript

Riguardo il tuo codice l'errore potrebbe essere qui:
document.getElementById('mc').style.display=yes

= yes non esiste, se vuoi dare un valore boolean deve essere 1/0 o true/false.

In questo caso quella proprieta' style.display deve ricevere una stringa, quindi tra "" virgolette

e i valori che puoi assegnargli sono quelli che potresti dare con CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/display

cos1950

21-05-2016, 18:51

mi spiace ... :(

Ti potrei consigliare di provare questo percorso, in 3 ore sono sicuro capirai un po meglio.
https://www.codecademy.com/learn/jquery

Se trovi dei concetti che non ti sono chiari allora probabilmente vorrai ripassare javascript

Riguardo il tuo codice l'errore potrebbe essere qui:
document.getElementById('mc').style.display=yes

= yes non esiste, se vuoi dare un valore boolean deve essere 1/0 o true/false.

In questo caso quella proprieta' style.display deve ricevere una stringa, quindi tra "" virgolette

e i valori che puoi assegnargli sono quelli che potresti dare con CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/display

Ho provato sia con il codice su href con onclick che in una function separata in uno script in fondo al body...
Alla fine ne sono venuto a capo mettendo alla proprietà display (dell'element) 'inline' al posto di 'yes' o 'visible'... come in questo frammento di codice

http://forum.it.altervista.org/javascript-e-altri-linguaggi-di-scripting/35104-javascript-e-propriet-display.html

e così ha funzionato...

OoZic

22-05-2016, 00:35

Ti consiglio vivamente di farti la traccia web su codecademy che comprende html+css+js e poi jQuery.

Altrimenti va a finire che ci perdi un sacco di tempo proprio xke ti mancano delle basi importanti del web, ad esempio il non sapere le diverse proprieta' "display" che puoi assegnare ad un elemento (inline, inline-block, block, table, flex, none, etc...)

cos1950

22-05-2016, 12:21

questo frammento di codice, in cui ho fatto ricorso a jQuery, dovrebbe fa scomparire l'elemento <object> che è un player swf, utilizzando il metodo FadeOut(0)

<object id="player" style="classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="suona" >

<param name="movie" value="mm/player.swf">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<embed type="application/x-shockwave-flash"
id="player2"
name="player2"
src="player.swf"
width="420"
height="340"
allowscriptaccess="always"
allowfullscreen="true"
backcolor="red"
flashvars="file=playlist.xml&image=dam042.jpg">
</object>

<input type="button" id="bottone" value="Fade out" href="javascript:void(0)">
</input>

<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>

<script type="text/javascript">

$("#bottone").click(function()
{
$(‘#player’).fadeOut(0);
});
</script>

In realtà non fa niente...

OoZic

23-05-2016, 10:06

Quel codice e' pienissimo di errori :(

Ci sono virgolette aperte e non chiuse.
La versione di jQuery che stai usando e' vecchissima, usa la 2.x
http://jquery.com/download/

Stai usando un editor che ti possa dare delle dritte?

Altrimenti semplicemente facendo copia&incolla del tuo codice su jsbin ti rendi conto degli errori (tutto quello che e' rosso)

http://i.imgur.com/ByN0OrW.png

cos1950

23-05-2016, 13:39

Jsbin è favoloso... in 4 e 4 otto ho trovato tutti i bug... adesso funge :D

OoZic

23-05-2016, 18:08

ti consiglio di usare un editor moderno tipo https://atom.io/

e aggiungi qualche plugin utile tipo
https://atom.io/packages/linter
https://atom.io/packages/linter-htmlhint
https://atom.io/packages/linter-jshint o il piu' moderno https://atom.io/packages/linter-eslint
e magari
https://atom.io/packages/atom-beautify

con questo dovresti evitare tutti quegli errori che un linter ti segnala prontamente

ciao