video.js - लिंक पर क्लिक करते समय वीडियो स्रोत अपडेट करें

मैं एम्बेडेड वीडियो वाला एक पृष्ठ रखने की कोशिश कर रहा हूं जो वीडियो फ्रेम के नीचे एक लिंक क्लिक होने पर गतिशील रूप से स्रोत को बदल देगा। स्रोत वीडियो मेरे होस्ट सर्वर पर हैं। यानी यह तस्वीर यह दिखाता है:video.js - लिंक पर क्लिक करते समय वीडियो स्रोत अपडेट करें

[पेज के नमूना] [1]

मैं this page भर में आया था, जो उत्तर है लगता है, लेकिन मैं इसे करने की कोशिश की और यह काम नहीं किया!। उदाहरण के बाद, मैंने सीएसएस & जावास्क्रिप्ट और शरीर में आवश्यक एचटीएमएल चिपकाया। मैंने अपने यूआरएल के सभी संदर्भों को अपडेट किया और फ़ाइल नामों को परीक्षण के उदाहरण के समान रखने की कोशिश की। नीचे मैंने कोशिश की है।

क्या कोई मेरी त्रुटियों को इंगित कर सकता है, या ऐसा करने का एक और शानदार तरीका प्रदान कर सकता है? लिंक क्लिक होने पर मूल रूप से एम्बेडेड वीडियो को गतिशील रूप से बदलता है और वीडियो सभी सामान्य ब्राउज़रों और अधिकांश उपकरणों में काम करता है। यह एक WordPress साइट, ~~वर्डप्रेस~~ के लिए जेडब्ल्यू प्लेयर का उपयोग, (मेरी त्रुटि) के बजाय मैंने पाया इस स्क्रिप्ट/कोड के लिए Video.js

यह पूर्व छवि लोड वास्तव में है, लेकिन अदा नहीं करता है के लिए है।

एक परीक्षण मैं इस कोशिश की के रूप में है और यह एक वीडियो ठीक से खेलने करता है:

<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>

एकाधिक स्रोत के लिए जावास्क्रिप्ट संस्करण के लिए

<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>

प्रीलोड छवि लिंक पहला वीडियो लोड लेकिन कोई वीडियो नहीं, त्रुटि "समर्थित प्रारूप वाला कोई वीडियो नहीं है और एमआईएमई प्रकार मिला"

तो मैं इस खंड

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>

परिणाम 1 वीडियो लोड नहीं बल्कि अन्य लिंक किए गए वीडियो में पहला वीडियो के लिए स्रोत गयी।

वीडियो/png के नाम: testvid_01.mp4, testvid_01.ogv, testvid_01.webm, testvid_02.mp4, testvid_02.ogv, testvid_02.webm, testvid_03.mp4 testvid_02.png, testvid_03 testvid_01.png। ogv, testvid_03.webm, testvid_03.png

मैंने वर्डप्रेस पेज और एचटीएमएल पेज दोनों में यह कोशिश की है, परिणाम समान हैं।

मुझे यकीन नहीं है कि यह स्क्रिप्ट तब भी करेगी जो मैं चाहता हूं?

स्रोत

2013-05-20 user2397591

जावास्क्रिप्ट उदाहरण में वीडियो.जेएस लाइब्रेरी शामिल नहीं है। आप सिर में निम्नलिखित शामिल करने का प्रयास कर सकते हैं।

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> 
<script src="http://vjs.zencdn.net/c/video.js"></script>

अन्यथा, पृष्ठ को कहीं और देखने के लिए कोई तरीका है?

स्रोत

2013-05-22 18:22:12 heff

यह वीडियो तत्व की स्रोत विशेषता को तीन बार ओवरराइट करता है, इसलिए यह हमेशा वेबम वीडियो पर सेट हो जाएगा।

$("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");

इसके बजाय स्रोतों की एक सरणी लोड करने के लिए video.js API उपयोग करती हैं इसलिए Video.js एक चुन सकते हैं वर्तमान प्लेबैक तकनीक खेल सकते हैं:

$vid_obj.src([ 
    { type: "video/mp4", src: $content_path+$target+".mp4" }, 
    { type: "video/webm", src: $content_path+$target+".webm" }, 
    { type: "video/ogg", src: $content_path+$target+".ogv" } 
]);

अपडेट किया गया बेला: http://jsfiddle.net/mister_ben/8awNt/

स्रोत

2013-05-23 12:40:28 misterben

video.js एपीआई लिंक मर चुका है। – Atomosk

समग्र को जोड़ना मूल प्रश्न का उत्तर, ऊपर दिए गए misterben द्वारा दिए गए वीडियो स्विचिंग video.js के वर्तमान संस्करण (4.8.0) में काम करता है, लेकिन पोस्टर छवि को बदलने वाला कोड मूल प्रश्न पोस्ट से काम नहीं करता है, या 0/39/2014 के रूप में jsfiddle code sample में। यह करने के लिए

// hide the current loaded poster 
$("img.vjs-poster").hide(); 

... 
... 
... 

// replace the poster source 
$("img.vjs-poster").attr("src",$content_path+$target+".png").show();

आप से user239759 के मूल प्रश्न कोड (नीचे संदर्भित) के लिए दो छोटे संशोधन करने के लिए की जरूरत है

// hide the current loaded poster 
$(".vjs-poster").hide(); 

... 
... 
... 

// replace the poster source 
$(".vjs-poster").css("background-image","url("+$content_path+$target+".png)").show();

यह है अगर आप मानक Video.js उपयोग कर रहे हैं कोड, और संबंधित सीएसएस।

यह उन लोगों के लिए भी ध्यान दिया जाना चाहिए जिन्होंने इसे उपरोक्त कोड से नहीं निकाला है, पोस्टर छवियों को फ़ाइल एक्सटेंशन को छोड़कर वीडियो के समान ही नामित किया जाना चाहिए, और वीडियो के समान निर्देशिका में रखा जाना चाहिए। जब तक आप पोस्टर छवियों के लिए $content_path के लिए एक अलग var का उपयोग नहीं करते हैं।

स्रोत

2014-09-05 10:03:32 kenjikato

video.js - लिंक पर क्लिक करते समय वीडियो स्रोत अपडेट करें

उत्तर

संबंधित मुद्दे