Sto provando ad avere una pagina con video incorporato che cambierà la sorgente in modo dinamico quando si fa clic su un collegamento sotto il fotogramma video. I video di origine sono sul mio server host. cioè this pic lo illustra:video.js - aggiornamento sorgente video quando si fa clic su un collegamento
[campione di pagina] [1]
mi sono imbattuto this page, che sembra avere la risposta, ma ho provato e non ha funzionato!. Seguendo l'esempio, ho incollato il css & javascript nel e l'html necessario nel corpo. Ho aggiornato tutti i riferimenti ai miei URL e ho cercato di mantenere i nomi dei file come nell'esempio per i test. Di seguito è quello che ho provato.
Qualcuno può indicare i miei errori o fornire un modo più elegante per farlo? In pratica cambia il video incorporato quando fai clic sul link e il video funziona con tutti i browser e la maggior parte dei dispositivi. Si tratta di un sito WordPress,
utilizzando JW Player per wordpress
, (mio errore) invece ho trovato questo script/codice è in realtà per Video.js
Si carica l'immagine pre ma non gioca.
Come test ho provato questo e lo fa giocare singolo video correttamente:
<html>
<head>
<title></title>
<style media="screen" type="text/css">
.wrap { margin:30px auto 10px; text-align:center }
.container { width:440px; height:300px; border:5px solid #ccc }
p { font: 10px/1.0em 'Helvetica',sans-serif; margin:20px }
</style>
<script>
$("input[type=button]").click(function() {
var $target = "testvid_"+$(this).attr("rel");
var $content_path = "http://www.mywebsite.net/videos/";
var $vid_obj = _V_("div_video");
// hide the current loaded poster
$("img.vjs-poster").hide();
$vid_obj.ready(function() {
// hide the video UI
$("#div_video_html5_api").hide();
// and stop it from playing
$vid_obj.pause();
// assign the targeted videos to the source nodes
$("video:nth-child(1)").attr("src",$content_path+$target+".mp4");
$("video:nth-child(1)").attr("src",$content_path+$target+".ogv");
$("video:nth-child(1)").attr("src",$content_path+$target+".webm");
// replace the poster source
$("img.vjs-poster").attr("src",$content_path+$target+".png").show();
// reset the UI states
$(".vjs-big-play-button").show();
$("#div_video").removeClass("vjs-playing").addClass("vjs-paused");
// load the new sources
$vid_obj.load();
$("#div_video_html5_api").show();
});
});
$("input[rel='01']").click();
</script> </head>
<body>
<section class="container wrap">
<video id="div_video" class="video-js vjs-default-skin" controls preload="auto" width="440" height="300" poster="http://www.mywebsite.net/videos/testvid_01.png" data-
setup="{}">
<source src="" type="video/mp4">
<source src="" type="video/ogg">
<source src="" type="video/webm">
</video>
</section>
<div class="wrap">
<input rel="01" type="button" value="load video 1">
<input rel="02" type="button" value="load video 2">
<input rel="03" type="button" value="load video 3">
</div>
</body>
</html>
L'immagine precarico
<video id="testvideo" class="video-js vjs-default-skin" width="440" height="300" controls="controls">
<source src="http://www.mywebsite.net/videos/testvid_01.mp4" type="video/mp4"/>
<source src="http://www.mywebsite.net/videos/testvid_01.webm" type="video/webm"/>
<source src="http://www.mywebsite.net/videos/testvid_01.ogv" type="video/ogg"/>
</video>
La versione JavaScript per fonte più collegamenti per il Il primo video viene caricato ma non c'è video, l'errore è "Nessun video con formato supportato e tipo MIME trovato"
Così ho aggiunto la fonte per il primo video in questa sezione
setup="{}">
<source src="http://www.mywebsite.net/videos/videos/testvid_01.mp4" type="video/mp4">
<source src="http://www.mywebsite.net/videos/videos/testvid_01.ogv" type="video/ogg">
<source src="http://www.mywebsite.net/videos/videos/testvid_01.webm type="video/webm">
</video>
Risultato del 1 ° carichi video ma non gli altri video collegate.
nomi del video/png: testvid_01.mp4, testvid_01.ogv, testvid_01.webm, testvid_01.png testvid_02.mp4, testvid_02.ogv, testvid_02.webm, testvid_02.png testvid_03.mp4, testvid_03. ogv, testvid_03.webm, testvid_03.png
Ho provato questo sia nella pagina wordpress che nella pagina html i risultati sono gli stessi.
Non sono sicuro anche se questo script farà quello che voglio?
collegamento API video.js è morto. – Atomosk