HTML5 वीडियो टैग पर बदलते स्रोत

Question

मैं एक वीडियो प्लेयर बनाने की कोशिश कर रहा हूं, जो हर जगह काम करे। अब तक मैं साथ जा रहा हूँ:

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(जैसा कि कई साइटों पर देखा गया है, उदाहरण के लिए हर किसी के लिए वीडियो ) अब तक, बहुत अच्छा।

लेकिन अब मैं भी वीडियो प्लेयर के साथ कुछ प्रकार की प्लेलिस्ट / मेनू चाहता हूं, जिसमें से मैं अन्य वीडियो का चयन कर सकता हूं। वे तुरंत मेरे खिलाड़ी के भीतर खोले जाने चाहिए। इसलिए मुझे "वीडियो के स्रोत को गतिशील रूप से बदलना होगा" (जैसा कि dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - अनुभाग पर देखा गया है "आइए एक और फिल्म देखें" ") जावास्क्रिप्ट के साथ। आइए समय के लिए फ़्लैशप्लेयर (और इस प्रकार IE) भाग के बारे में भूल जाते हैं, मैं बाद में उस से निपटने की कोशिश करूंगा।

इसलिए <source>टैग बदलने के लिए मेरा JS कुछ इस तरह होना चाहिए:

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

समस्या यह है, यह सभी ब्राउज़रों में काम नहीं करता है। अर्थात्, फ़ायरफ़ॉक्स = ओ एक अच्छा पृष्ठ है, जहाँ आप समस्या का अवलोकन कर सकते हैं: http://www.w3.org/2010/05/video/mediaevents.html

जैसे ही मैं लोड () विधि (फ़ायरफ़ॉक्स, माइंड यू) में ट्रिगर करता हूं, वीडियो प्लेयर मर जाता है।

अब मुझे पता चला है कि जब मैं कई <source>टैग का उपयोग नहीं करता हूं , लेकिन <video>टैग के भीतर सिर्फ एक src विशेषता है , तो पूरी बात फ़ायरफ़ॉक्स में काम नहीं करती है।

तो मेरी योजना सिर्फ उस src विशेषता का उपयोग करने और canPlayType () फ़ंक्शन का उपयोग करके उचित फ़ाइल निर्धारित करने के लिए है ।

क्या मैं किसी तरह गलत कर रहा हूं या चीजों को उलझा रहा हूं ??

Comments

जो मुझे ठीक लगता है। मार्कअप को सरल बनाने के लिए यह "जटिल" कैसे है?

— मैट बॉल

समस्या यह है कि मैं खुद को बहुत सारे जावास्क्रिप्ट और मामलों के भेद में देखता हूं। अगर शायद मैं कुछ याद किया, जैसे कई <source>टैग के साथ फ़ायरफ़ॉक्स में काम करने का एक तरीका था । तब मुझे लगता है कि यह आसान होगा

— sashn

क्या तुमने कभी ie8 पर फ्लैश भाग के बारे में पता लगाया?

— नीरज

अंतिम समाधान @Neeraj प्लगइन शामिल Video.js जो IE8 और पसंद के लिए फ़ॉलबैक के रूप में एक फ़्लैश प्लेयर का उपयोग करता है। हालांकि आज बेहतर प्लगइन्स हो सकते हैं। प्लगइन का उपयोग करके लोड () विधि के बारे में फ़ायरफ़ॉक्स समस्या के साथ मदद नहीं की, जो इस पद के लिए प्रारंभिक प्रेरणा थी। आज, यह मुद्दा लंबे समय से तय है, ऐसा लगता है।

— शशांक

Answer 1

मुझे इन सभी उत्तरों से नफरत थी क्योंकि वे बहुत कम थे या अन्य रूपरेखाओं पर निर्भर थे।

क्रोम में काम करने का यह "वन" वेनिला JS तरीका है, कृपया अन्य ब्राउज़रों में परीक्षण करें:

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML:

<video id="video" width="320" height="240"></video>

जे एस:

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4');

video.appendChild(source);
video.play();

setTimeout(function() {  
    video.pause();

    source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4'); 

    video.load();
    video.play();
}, 3000);

Comments

यह मेरे लिए सबसे साफ और कुशल था।

— फिल मैककार्टी

मुझे इसके साथ गेंद खेलने के लिए क्रोम नहीं मिला। केवल अगर मैं वेब पथ के लिए वीडियो src विशेषता सेट करता हूं

— एडम हे

खेलने विधि केवल कुछ ब्राउज़र नीतियों में उपयोगकर्ता हावभाव से अनुमति दी है।

— अनसन

मैं इसे एक और कारण के लिए बहुत सराहना करता हूं! मैं एक वीडियो पेज सेट करने की कोशिश कर रहा हूं जो किसी भी वीडियो को तब तक नहीं दिखाता जब तक कि आगंतुक एक का चयन नहीं करता। मैं एक खाली स्रोत टैग के साथ एक वीडियो टैग सेट कर सकता हूं, लेकिन यह हमेशा जावास्क्रिप्ट डिबग कंसोल पर विफलता उत्पन्न करेगा। अब मुझे पता है कि जब तक उपयोगकर्ता एक का चयन नहीं करता तब तक मैं एक 'स्रोत' जोड़ने पर रोक लगा सकता हूं। अब तक, मुझे समझ नहीं आया कि मुझे स्रोत बनाने के लिए CreateElement () का उपयोग करने की आवश्यकता है, और फिर वीडियो तत्व में जोड़ने के लिए appendChild () का उपयोग करें! बाद के चयन के लिए, मैं पहले देख सकता हूं कि क्या स्रोत तत्व मौजूद है इसलिए मैं उस चरण को दोहराता नहीं हूं।

— रैंडी

यह समाधान बहुत अच्छा काम करता है अगर कोई भी पेलोड प्रतिक्रिया से सामग्री-प्रकार के साथ समस्या का सामना कर रहा है, भले ही निर्दिष्ट सामग्री-प्रकार सही हो, लेकिन फिर भी अजीब व्यवहार करता है।

— meDeepakJain

Answer 2

माडर्निज़्र ने मेरे लिए एक आकर्षण की तरह काम किया।

मैंने जो किया वह यह है कि मैंने उपयोग नहीं किया <source>। किसी तरह यह बात खराब हो गई, क्योंकि वीडियो ने केवल पहली बार लोड () काम किया था। इसके बजाय मैंने वीडियो टैग के अंदर स्रोत विशेषता <video src="blabla.webm" />का उपयोग किया -> और ब्राउज़र द्वारा समर्थित प्रारूप को निर्धारित करने के लिए मॉडर्निज़्र का उपयोग किया।

<script>
var v = new Array();

v[0] = [
        "videos/video1.webmvp8.webm",
        "videos/video1.theora.ogv",
        "videos/video1.mp4video.mp4"
        ];
v[1] = [
        "videos/video2.webmvp8.webm",
        "videos/video2.theora.ogv",
        "videos/video2.mp4video.mp4"
        ];
v[2] = [
        "videos/video3.webmvp8.webm",
        "videos/video3.theora.ogv",
        "videos/video3.mp4video.mp4"
        ];

function changeVid(n){
    var video = document.getElementById('video');

    if(Modernizr.video && Modernizr.video.webm) {
        video.setAttribute("src", v[n][0]);
    } else if(Modernizr.video && Modernizr.video.ogg) {
        video.setAttribute("src", v[n][1]);
    } else if(Modernizr.video && Modernizr.video.h264) {
        video.setAttribute("src", v[n][2]);
    }

    video.load();
}
</script>

उम्मीद है कि यह आपकी मदद करेगा :)

आप का उपयोग नहीं करना चाहते हैं Modernizr , आप हमेशा उपयोग कर सकते हैं , canPlayType () ।

Comments

क्या आपका मतलब v [n] [1] दूसरे के लिए नहीं है (Modernizr.video && Modernizr.video.ogg) सच है?

— bergie3000

अन्य तरीकों की कोशिश करने के बाद, मैंने इस मॉडर्निज़र दृष्टिकोण की कोशिश की और यह अच्छी तरह से काम किया। Chrome (किसी कारण से) मेरे मामले में एक mp4 लोड नहीं करेगा, लेकिन एक वेबम लोड करेगा। धन्यवाद @MariusEngenHaugen

— एडम हे

खुशी है कि मैं @AdamHey

— Marius Engen Haugen

Answer 3

आपकी मूल योजना मुझे ठीक लगती है। शायद आपको अधिक ब्राउज़र क्वैरक्स मिलेंगे जो गतिशील रूप से <source>तत्वों का प्रबंधन कर रहे हैं, जैसा कि डब्ल्यू 3 कल्पना नोट द्वारा यहां दिया गया है:

किसी स्रोत तत्व और इसकी विशेषता को गतिशील रूप से संशोधित करना जब तत्व पहले से ही वीडियो या ऑडियो तत्व में डाला जाता है तो कोई प्रभाव नहीं पड़ेगा। जो खेल रहा है उसे बदलने के लिए, सीधे मीडिया तत्व पर सीधे src विशेषता का उपयोग करें, संभवतः उपलब्ध संसाधनों में से लेने के लिए canPlayType () विधि का उपयोग कर सकते हैं। आम तौर पर दस्तावेज़ को पार्स किए जाने के बाद मैन्युअल रूप से स्रोत तत्वों में हेरफेर करना एक अनावश्यक रूप से [सिक] जटिल दृष्टिकोण है।

http://dev.w3.org/html5/spec/Overview.html#the-source-element

Answer 4

मैंने इसे इस सरल विधि से हल किया

function changeSource(url) {
   var video = document.getElementById('video');
   video.src = url;
   video.play();
}

Answer 5

नई फ़ाइलों को लोड करने के लिए एक ही वीडियो प्लेयर प्राप्त करने के बजाय, पूरे <video>तत्व को क्यों न मिटाएं और इसे फिर से बनाएं। यदि src सही हैं, तो अधिकांश ब्राउज़र इसे स्वचालित रूप से लोड करेंगे।

उदाहरण ( प्रोटोटाइप का उपयोग करके ):

var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });

vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });

$('container_div').update(vid);

Comments

वीडियो टैग हटाने के बाद भी यह समग्र ब्राउज़र को धीमा कर देता है, ब्राउज़र अभी भी हटाए गए वीडियो को अंत तक लोड करता है।

— मो स्वीट स्वीट

कुछ ब्राउज़र (मोबाइल) आपको उपयोगकर्ता की बातचीत के बिना प्रोग्रामेटिक रूप से मीडिया चलाने की अनुमति नहीं देते हैं, और चूंकि आपके पास पहले से ही तत्व पर एक इंटरैक्शन है, इसलिए इसे एक नए के साथ प्रतिस्थापित करने से वह क्षमता खो जाएगी।

— मैक्स वाटरमैन

Answer 6

बस एक div रखो और सामग्री को अपडेट करें ...

<script>
function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style="height: 100px; width: 100px;"><source src="'+src+'" type="video/mp4"></video>';
    document.getElementById('video_ctrl').play();
}
</script>
<button onClick="setvideo('video1.mp4');">Video1</button>
<div id="div_video"> </div>

Answer 7

युक्ति के अनुसार

किसी स्रोत तत्व और इसकी विशेषता को गतिशील रूप से संशोधित करना जब तत्व पहले से ही वीडियो या ऑडियो तत्व में डाला जाता है तो कोई प्रभाव नहीं पड़ेगा। जो खेल रहा है उसे बदलने के लिए, सीधे मीडिया तत्व पर सीधे src विशेषता का उपयोग करें, संभवतः उपलब्ध संसाधनों में से लेने के लिए canPlayType () विधि का उपयोग कर सकते हैं। आम तौर पर दस्तावेज़ को पार्स किए जाने के बाद मैन्युअल रूप से स्रोत तत्वों में हेरफेर करना एक अनावश्यक रूप से जटिल दृष्टिकोण है।

तो आप जो करने की कोशिश कर रहे हैं वह स्पष्ट रूप से काम करने वाला नहीं है।

Comments

@ greg.kindel मैंने पोस्ट करने के बाद देखा ... लेकिन पहली जगह में मुझे ध्यान नहीं आया कि आपका इंट्रो टेक्स्ट भ्रामक है। हम किस मूल योजना के बारे में बात कर रहे हैं? मूल मूल योजना जो काम नहीं करेगी या अद्यतन मूल योजना जो हमारे द्वारा पोस्ट किए गए मार्गदर्शन का अनुसरण करती है?

— योर

निष्पक्ष रूप से, मुझे उद्धृत करना चाहिए था। मेरा मतलब था कि "बस उस src विशेषता का उपयोग करें और canPlayType () फ़ंक्शन" का उपयोग करके उपयुक्त फ़ाइल का निर्धारण करें जो काम करता है।

— greg.kindel

Answer 8

यौर: यद्यपि आपने जो कॉपी और पेस्ट किया है वह अच्छी सलाह है, इसका मतलब यह नहीं है कि IE5 (या उस मामले के लिए IE8) में भी, HTML5 वीडियो तत्व के स्रोत तत्व को बदलना असंभव है। (यह समाधान शामिल नहीं है) पूरे वीडियो तत्व को बदलना, क्योंकि यह खराब कोडिंग अभ्यास है)।

जावास्क्रिप्ट के माध्यम से HTML5 वीडियो टैग में वीडियो बदलने / स्विच करने का एक पूरा समाधान यहां पाया जा सकता है और सभी HTML5 ब्राउज़र (फ़ायरफ़ॉक्स, क्रोम, सफारी, IE9, आदि) में परीक्षण किया गया है।

यदि यह मदद करता है, या यदि आपको परेशानी हो रही है, तो कृपया मुझे बताएं।

Comments

प्रतिभाशाली! इसे करने का यही तरीका है। आपको jQuery की भी आवश्यकता नहीं है; लिंक किए गए कोड में, विकल्प: mp4Vid.setAttribute ('src', "/pathTo/newVideo.mp4");

— वेलोजेट

Answer 9

मैं इसके साथ वीडियो स्रोत को गतिशील रूप से बदलने के लिए आता हूं। "कैपेप्लेट" घटना कभी-कभी फ़ायरफ़ॉक्स में आग नहीं लगाती है इसलिए मैंने "लोडमेटडाटा" जोड़ा है। इसके अलावा अगर मैं पिछले वीडियो को रोकूं तो एक ...

var loadVideo = function(movieUrl) {
    console.log('loadVideo()');
    $videoLoading.show();
    var isReady = function (event) {
            console.log('video.isReady(event)', event.type);
            video.removeEventListener('canplay', isReady);
            video.removeEventListener('loadedmetadata', isReady);
            $videoLoading.hide();
            video.currentTime = 0;
            video.play();
        },
        whenPaused = function() {
            console.log('video.whenPaused()');
            video.removeEventListener('pause', whenPaused);
            video.addEventListener('canplay', isReady, false);
            video.addEventListener('loadedmetadata', isReady, false); // Sometimes Firefox don't trigger "canplay" event...
            video.src = movieUrl; // Change actual source
        };

    if (video.src && !video.paused) {
        video.addEventListener('pause', whenPaused, false);
        video.pause();
    }
    else whenPaused();
};

Comments

ठीक है, निश्चित रूप से मेरे लिए काम किया, फ़ायरफ़ॉक्स संपत्ति को न तो संभाल रहा है और न canplayही canplaythroughऔर lodedmetadataवीडियो संचालकों को जोड़ने (और बाद में हटाने) की आवश्यकता है :-(

— भगवान

Answer 10

यह मेरा समाधान है:

<video id="playVideo" width="680" height="400" controls="controls">
    <source id="sourceVideo" src="{{video.videoHigh}}" type="video/mp4">
</video>
    <br />
<button class="btn btn-warning" id="{{video.videoHigh}}" onclick="changeSource(this)">HD</button>
<button class="btn btn-warning" id="{{video.videoLow}}" onclick="changeSource(this)">Regular</button>

<script type="text/javascript">
    var getVideo = document.getElementById("playVideo");
    var getSource = document.getElementById("sourceVideo");
    function changeSource(vid) {
        var geturl = vid.id;
        getSource .setAttribute("src", geturl);
        getVideo .load()
        getVideo .play();
        getVideo .volume = 0.5;
    }
</script>

Answer 11

<source />विशेष रूप से क्रोम 14.0.835.202 में मेरे लिए टैग का उपयोग करना मुश्किल साबित हुआ, हालांकि फायरफॉक्स में मेरे लिए यह ठीक रहा। (यह मेरे ज्ञान की कमी हो सकती है, लेकिन मुझे लगा कि एक वैकल्पिक समाधान वैसे भी उपयोगी हो सकता है।) इसलिए, मैंने केवल एक <video />टैग का उपयोग करके और वीडियो टैग पर ही src विशेषता को सेट करना समाप्त कर दिया। canPlayVideo('<mime type>')समारोह का निर्धारण करने के लिए किया जाए या नहीं विशिष्ट ब्राउज़र इनपुट वीडियो खेल सकते हैं इस्तेमाल किया गया था। निम्नलिखित फ़ायरफ़ॉक्स और क्रोम में काम करता है।

संयोग से, फायरफॉक्स और क्रोम दोनों "ओग" प्रारूप खेल रहे हैं, हालांकि क्रोम "वेबम" की सिफारिश करता है। मैंने पहले "ओग" के ब्राउज़र समर्थन के लिए चेक डाल दिया, क्योंकि अन्य पोस्ट में उल्लेख किया गया है कि फायरफॉक्स पहले ओग स्रोत को पसंद करता है (यानी <source src="..." type="video/ogg"/>)। लेकिन, मैंने (और अत्यधिक संदेह) परीक्षण नहीं किया है कि क्या कोड में आदेश वीडियो टैग पर "src" सेट करते समय बिल्कुल भी कोई फर्क पड़ता है या नहीं।

एचटीएमएल

<body onload="setupVideo();">
    <video id="media" controls="true" preload="auto" src="">
    </video>
</body>

जावास्क्रिप्ट

function setupVideo() {
       // You will probably get your video name differently
       var videoName = "http://video-js.zencoder.com/oceans-clip.mp4";

       // Get all of the uri's we support
       var indexOfExtension = videoName.lastIndexOf(".");
       //window.alert("found index of extension " + indexOfExtension);
       var extension = videoName.substr(indexOfExtension, videoName.length - indexOfExtension);
       //window.alert("extension is " + extension);
       var ogguri = encodeURI(videoName.replace(extension, ".ogv"));
       var webmuri = encodeURI(videoName.replace(extension, ".webm"));
       var mp4uri = encodeURI(videoName.replace(extension, ".mp4"));
       //window.alert(" URI is " + webmuri);


       // Get the video element
       var v = document.getElementById("media");
       window.alert(" media is " + v);

       // Test for support
       if (v.canPlayType("video/ogg")) {
            v.setAttribute("src", ogguri);
           //window.alert("can play ogg");
       }
       else if (v.canPlayType("video/webm")) {
           v.setAttribute("src", webmuri);
           //window.alert("can play webm");
       }
       else if (v.canPlayType("video/mp4")) {
           v.setAttribute("src", mp4uri);
           //window.alert("can play mp4");
       }
       else {
           window.alert("Can't play anything");
       }

      v.load();
      v.play();
  }

Answer 12

मैं काफी समय से इस पर शोध कर रहा हूं और मैं यही काम करने की कोशिश कर रहा हूं, इसलिए उम्मीद है कि यह किसी और की मदद करेगा। मैं crossbrowsertesting.com का उपयोग कर रहा हूं और सचमुच में इसका परीक्षण हर आदमी को ज्ञात है। वर्तमान में मुझे जो समाधान मिला है वह ओपेरा, क्रोम, फ़ायरफ़ॉक्स 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8 में काम करता है।

गतिशील रूप से बदलते स्रोत

डायनामिक रूप से वीडियो को बदलना बहुत मुश्किल है, और यदि आप एक फ्लैश बैकबैक चाहते हैं, तो आपको वीडियो को DOM / पेज से हटाना होगा और इसे फिर से जोड़ना होगा, ताकि फ्लैश अपडेट हो जाए क्योंकि फ्लैश डायनेमिक अपडेट को Flash vars को नहीं पहचानेगा। आप जावास्क्रिप्ट का उपयोग करने के लिए यह गतिशील रूप से परिवर्तित करने के लिए जा रहे हैं, मैं पूरी तरह से सब हटा <source>तत्वों और बस का उपयोग canPlayTypeनिर्धारित करने के लिए srcजावास्क्रिप्ट में और breakया returnपहले समर्थित वीडियो प्रकार के बाद और मत भूलना गतिशील फ़्लैश वर mp4 अद्यतन करने के लिए। जब तक आप कॉल नहीं करते, तब भी कुछ ब्राउज़र पंजीकृत नहीं होंगे video.load()। मेरा मानना ​​है कि .load()आपके साथ जो समस्या आ रही थी, उसे पहले कॉल करके ठीक किया जा सकता हैvideo.pause()। वीडियो तत्वों को निकालना और जोड़ना ब्राउज़र को धीमा कर सकता है क्योंकि यह हटाए गए वीडियो को बफर करना जारी रखता है, लेकिन एक वर्कअराउंड है ।

क्रॉस-ब्राउज़र समर्थन

जहां तक ​​वास्तविक क्रॉस-ब्राउजर भाग की बात है, मैं वीडियो फॉर एवरीबॉडी के रूप में अच्छी तरह से आया था । मैंने पहले ही MediaelementJS Wordpress plugin की कोशिश की, जो हल होने की तुलना में बहुत अधिक मुद्दों का कारण बना। मुझे संदेह है कि मुद्दे वर्डप्रेस प्लग-इन और वास्तव में लाइब्रेरी के कारण थे। यदि संभव हो तो मैं जावास्क्रिप्ट के बिना काम करने वाली चीज़ खोजने की कोशिश कर रहा हूं। अब तक, मैं इस सादे HTML के साथ आया हूँ:

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
    <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong>  <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>

महत्वपूर्ण नोट :

• पहले ओग को डालते हुए समाप्त कर दिया <source>क्योंकि मैक ओएस फ़ायरफ़ॉक्स वीडियो चलाने की कोशिश कर रहा है अगर यह पहली बार एक MP4 का सामना करता है <source>।
• सही MIME प्रकार महत्वपूर्ण हैं .ogv फ़ाइलें होनी चाहिए video/ogg, नहीं video/ogv
• यदि आपके पास एचडी वीडियो है, तो मुझे एचडी गुणवत्ता ओजीजी फ़ाइलों के लिए मिला सबसे अच्छा ट्रांसकोडर फायरफॉग है
• .iphone.mp4फ़ाइल iPhone 4 के लिए जो होगा केवल वीडियो के साथ 264 बेसलाइन 3 वीडियो और AAC ऑडियो एमपीईजी -4 रहे हैं खेलते हैं। उस प्रारूप के लिए मुझे मिला सबसे अच्छा ट्रांसकोडर है हैंडब्रेक, iPhone और iPod टच प्रीसेट का उपयोग करके iPhone 4+ पर काम करेगा, लेकिन iPhone 3GS प्राप्त करने के लिए आपको iPod प्रीसेट का उपयोग करने की आवश्यकता है, जिसमें बहुत कम रिज़ॉल्यूशन है जो मैंने जोड़ा है video.iphone3g.mp4।
• भविष्य में हम मीडिया प्रश्नों के साथ मोबाइल उपकरणों को लक्षित करने के mediaलिए <source>तत्वों पर एक विशेषता का उपयोग करने में सक्षम होंगे , लेकिन अभी पुराने एप्पल और एंड्रॉइड डिवाइस इसे अच्छी तरह से समर्थन नहीं करते हैं।

संपादित करें :

• मैं अभी भी हर किसी के लिए वीडियो का उपयोग कर रहा हूं, लेकिन अब मैंने फ्लैशपबैक को नियंत्रित करने के लिए फ्लोप्लेयर का उपयोग करने के लिए संक्रमण किया है, जिसमें एक भयानक जावास्क्रिप्ट एपीआई है जिसे इसे नियंत्रित करने के लिए इस्तेमाल किया जा सकता है।

Comments

ऐसा लगता है कि इस सवाल का जवाब "मैं वीडियो क्रॉस ब्राउज़र कैसे चलाऊं?" और यह सवाल नहीं है कि "मैं अपने वीडियो के लिए प्लेलिस्ट कैसे सेट करूं?"।

— क्वेंटिन

@ क्वेंटिन यह था, के साथ शुरू करने के लिए, क्योंकि यह है कि कैसे मैं इस सवाल के माध्यम से Google और ओपी ने पाया कि वह एक वीडियो प्लेयर बनाने की कोशिश कर रहा है जो हर जगह काम करता है। मैंने उनके गतिशील प्रश्न को संबोधित करने के उत्तर को भी अपडेट किया।

— एलेक्स डब्ल्यू

Answer 13

मेरे पास एक समान वेब ऐप है और मैं उस तरह की समस्या का सामना नहीं कर रहा हूं। मैं ऐसा कुछ करता हूं:

var sources = new Array();

sources[0] = /path/to/file.mp4
sources[1] = /path/to/another/file.ogg
etc..

तब जब मैं स्रोतों को बदलना चाहता हूं मेरे पास एक फ़ंक्शन है जो इस तरह से कुछ करता है:

this.loadTrack = function(track){
var mediaSource = document.getElementsByTagName('source')[0];
mediaSource.src = sources[track];

    var player = document.getElementsByTagName('video')[0];
    player.load();

}

मैं ऐसा इसलिए करता हूं ताकि उपयोगकर्ता एक प्लेलिस्ट के माध्यम से अपना रास्ता बना सके, लेकिन आप userAgent की जांच कर सकते हैं और फिर उस तरह से उपयुक्त फ़ाइल लोड कर सकते हैं। मैंने इंटरनेट पर सभी की तरह कई स्रोत टैग का उपयोग करने की कोशिश की, लेकिन मुझे यह बहुत साफ लगा, और एक स्रोत टैग के src विशेषता में हेरफेर करने के लिए बहुत अधिक विश्वसनीय। ऊपर दिए गए कोड को मेमोरी से लिखा गया था, इसलिए हो सकता है कि मैंने कुछ हेट डिटेल्स पर काम किया हो, लेकिन सामान्य विचार यह है कि जब उपयुक्त हो, तो जावास्क्रिप्ट का उपयोग करके सोर्स टैग के src विशेषता को गतिशील रूप से बदल दें।

Answer 14

OGG स्रोत को शीर्ष पर ले जाने का प्रयास करें। मैंने देखा है कि फ़ायरफ़ॉक्स कभी-कभी भ्रमित हो जाता है और खिलाड़ी को रोकता है जब वह खेलना चाहता है, तो ओजीजी, पहले नहीं है।

एक कोशिश के काबिल है।

Answer 15

एक और तरीका है जो आप Jquery में कर सकते हैं।

एचटीएमएल

<video id="videoclip" controls="controls" poster="" title="Video title">
    <source id="mp4video" src="video/bigbunny.mp4" type="video/mp4"  />
</video>

<div class="list-item">
     <ul>
         <li class="item" data-video = "video/bigbunny.mp4"><a href="javascript:void(0)">Big Bunny.</a></li>
     </ul>
</div>

jQuery

$(".list-item").find(".item").on("click", function() {
        let videoData = $(this).data("video");
        let videoSource = $("#videoclip").find("#mp4video");
        videoSource.attr("src", videoData);
        let autoplayVideo = $("#videoclip").get(0);
        autoplayVideo.load();
        autoplayVideo.play();
    });

Answer 16

जावास्क्रिप्ट और jQuery का उपयोग करना:

<script src="js/jquery.js"></script>
...
<video id="vid" width="1280" height="720" src="v/myvideo01.mp4" controls autoplay></video>
...
function chVid(vid) {
    $("#vid").attr("src",vid);
}
...
<div onclick="chVid('v/myvideo02.mp4')">See my video #2!</div>