Télévision sur le forum.

[Invité]

Salut ! Ca va ? Moi oui x)

Bon j'écris direct, les membres de mon forum veulent une sorte de télé qui diffuse des vidéos, pubs (faites par moi bien sûr) etc..


Voici un aperçu :

http://images.all-free-download.com/images/graphiclarge/tv_shows_98296.jpg

Existe t'il un code ? Si quelqu'un peut m'aider, je vais vous donner les liens des vidéos diffusées dans la télé

[badibou]

Bonjour, je ne suis pas sur de comprendre exactement votre problème mais vous pourriez mettre un media player dans un widget personnalisé avec ce code :

<center><iframe allowTransparency="true" id="player" scrolling="no" width="650" allowtransparency="no" frameborder="0" src="votrelienvideo" height="500"></iframe></center>

Bien sur il vous faudra héberger votre vidéo sur le net...


Cordialement,

[Luluwebmaster]

Salut,

voici un petit code fait vite fais :

Code:

<style>
.tele_fow
{
background-image: url('http://nsa34.casimages.com/img/2013/05/12/mini_130512081314709460.jpg');
width: 200px;
height: 180px;
}
.lien_tele
{
position:relative;
left:8%;
top:3px;
width: 125px;
height: 100px;
border-radius: 30px 30px 30px 30px ;
}
</style>
<table class="tele_fow">
<tr>
<td>
<iframe class="lien_tele" src="lien_de_ta_video"></iframe>
</td>
</tr>
</table>

[Invité]

Salut et merci de vos aides

Lucrote, c'est un code HTML, Java ou CSS (faut préciser à la débutante que je suis )

[Luluwebmaster]

Salut,

ceci est le css :

Code:

<style>
.tele_fow
{
background-image: url('http://nsa34.casimages.com/img/2013/05/12/mini_130512081314709460.jpg');
width: 200px;
height: 180px;
}
.lien_tele
{
position:relative;
left:8%;
top:3px;
width: 125px;
height: 100px;
border-radius: 30px 30px 30px 30px ;
}
</style>


et ceci le HTML :

Code:

<table class="tele_fow">
<tr>
<td>
<iframe class="lien_tele" src="lien_de_ta_video"></iframe>
</td>
</tr>
</table>

[Invité]

Ce que je comprend pas c'est lien-tele

Pour les vidéos j'en veux plein qui passent l'une après l'autre


Et merci ^^

[Luluwebmaster]

"Lien_tele" est une classe, on le laisse.

Voici le code :

css:

Code:

<style>
.tele_fow
{
background-image: url('http://nsa34.casimages.com/img/2013/05/12/mini_130512081314709460.jpg');
width: 200px;
height: 180px;
}
.lien_tele
{
position:relative;
left:8%;
top:3px;
width: 125px;
height: 100px;
border-radius: 30px 30px 30px 30px ;
}
</style>

Le javascript :

Code:

<script>
function changeVideo(newUrl)
{
  document.getElementById("video_src").setAttribute("src", newUrl);
}
</script>

Le HTML :

Code:

<table class="tele_fow">
<tr>
<td>
<iframe class="lien_tele" src="lien_de_ta_video" id="video_src"></iframe>
</td>
</tr>
</table>
Les videos disponibles :<br />

<a href="javascript:changeVideo('Lien_de_ta_video');" rel="player" >
Ma video 1</a>
<a href="javascript:changeVideo('Lien_de_ta_video');" rel="player" >
Ma video 2</a>
<a href="javascript:changeVideo('Lien_de_ta_video');" rel="player">
Ma video 3</a>

[Invité]

Ca marche pas ^^"

[Luluwebmaster]

Que se passe il ?

[Invité]

J'ai mis les codes, et sur le css, il y a eu une correction du code ^^'

[Luluwebmaster]

Si tu as mis le css dans la partie "couleur->css" du PA, il faut enlever les balises "style"
Voila le CSS sans les balises style :

Code:


.tele_fow
{
background-image: url('http://nsa34.casimages.com/img/2013/05/12/mini_130512081314709460.jpg');
width: 200px;
height: 180px;
}
.lien_tele
{
position:relative;
left:8%;
top:3px;
width: 125px;
height: 100px;
border-radius: 30px 30px 30px 30px ;
}


[Invité]

Ca marche toujours pas :<

[Luluwebmaster]

Peux tu me donner tout les code que j'ai fais ( que tu as modifié normalement ) et me dire ou tu les a enregistrer ?

[Invité]

Je suis pas si débutante quand même x)

J'ai placé chaque code à sa place et ça marche pas.

L'image de la télé ne serait-t'elle pas le problème ?

Quelqu’un peut nous aider s'il vous plait ?

[Luluwebmaster]

Quand tu as enregistré le javascript, tu a enlevé les "<script>" ?

[Invité]

Non pourquoi ?

[Luluwebmaster]

Il faut les enlever.

Sans les balises :

Code:

function changeVideo(newUrl)
{
  document.getElementById("video_src").setAttribute("src", newUrl);
}

[Invité]

Aucun changement. Peux tu tester le code sur un forum test please ?

[Luluwebmaster]

Voici :

http://leblokolo.lebonforum.com/h4-test-tele

Clic sur "ma video 1 "pour voir la video que j'ai mis.

[Adam_sfp]

Bonjour

Vous pouvez essayer ce code qui charge les vidéos de façon aléatoire..
Mettre la partie HTML dans page d'accueil et le CSS dans votre CSS.

Pour rajouter des vidéos il faut changer cette ligne

Code:

videoStreams = ['EhTOWwAZxK0', 'WIT6PGWzGHo', '62rsmZ919kc', 'caklVAntCKY' ];

il faut juste mettre l'ID des vidéos youtube.
http://jsfiddle.net/adam_sfp/w48sx/


*source stackoverflow

[Invité]

Cool ! Merci ! Ca marche mais la télé est trop petite, c'est presque minuscule ! Comment l'agrandir ?

[Adam_sfp]

Cool ! Merci ! Ca marche mais la télé est trop petite, c'est presque minuscule ! Comment l'agrandir ?

Bonjour

Quand vous parlez de la télé ( c'est l'image de la télé ou la taille de la vidéo?)

Cordialement.

[Invité]

L'image de la télé, et la taille de la vidéo

Merci ^^

[Adam_sfp]

Bonjour

J'avais pas pris le bon lien de l'image...
voila
avec votre image
http://images.all-free-download.com/images/graphiclarge/tv_shows_98296.jpg

http://jsfiddle.net/adam_sfp/w48sx/4/

Cordialement.

[Invité]

Et avec celle ci stp ?

http://cdn.redmondpie.com/wp-content/uploads/2011/07/Apple-OLED-TV1.jpg

[Invité]

up ^^

[Invité]

up :I

[Adam_sfp]

Bonjour

Vous pouvez changer l'image et placer le tout en faisant des essais sur cette page
http://jsfiddle.net/adam_sfp/w48sx/4/

Cliquer sur run pour voir vos changements..

Dans la partie Css .tele changez l'ancien lien de l'image par le nouveau..
changez les tailles de l'image par les nouvelles
width: 590px;
height: 399px;

Pour la taille de la vidéo il faut changez les valeurs dans le CSS .vid
width:
height:
pour la positionner changez les valeurs
left:21px;
top:8px;
*changez aussi la taille de la vidéo dans la partie script
en mettant les mêmes valeurs que dan la partie CSS.
var player,
width = ,
height = ,



Cordialement.

[Invité]

Ca me donne ça : http://jsfiddle.net/adam_sfp/w48sx/4/ :/

[geekly-chic]

exusez moi mais vous les collez ou ce code ??