ইউটিউব ভিডিও উত্সটি এইচটিএমএল 5 ভিডিও ট্যাগটিতে দেখান?


116

আমি এইচটিএমএল 5 এ একটি ইউটিউব ভিডিও উত্স রাখার চেষ্টা করছি <video> ট্যাগে , তবে এটি কার্যকর হবে বলে মনে হচ্ছে না। কিছু গুগলিংয়ের পরে, আমি জানতে পেরেছি যে HTML5 উত্স হিসাবে ইউটিউব ভিডিও ইউআরএল সমর্থন করে না।

আপনি কি ইউটিউব ভিডিও এম্বেড করতে HTML5 ব্যবহার করতে পারেন? যদি তা না হয়, তবে কি কোনও কাজের সুযোগ নেই?


1
নীচে স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 15157377/… দ্বারা প্রদত্ত আইফ্রেমের সমাধানটি যথেষ্ট পরিমাণে কার্যকর হওয়া উচিত।
এস মেইডেন

উত্তর:


15

পদক্ষেপ 1: &html5=Trueআপনার প্রিয় ইউটিউব ইউআরএল যুক্ত করুন

পদক্ষেপ 2: <video/>উত্স ট্যাগ খুঁজে

পদক্ষেপ 3: controls="controls"ভিডিও ট্যাগে যুক্ত করুন:<video controls="controls"..../>

উদাহরণ:

<video controls="controls" 
       class="video-stream" 
       x-webkit-airplay="allow" 
       data-youtube-id="N9oxmRT2YWw" 
       src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;id=37da319914f6616c"></video>

কিছু expireজিনিস মনে হচ্ছে । srcস্ট্রিংটি কতক্ষণ কাজ করবে তা আমি জানি না ।

এখনও নিজেকে পরীক্ষা করছি।

সম্পাদনা (জুলাই ২৮, ২০১১) : নোট করুন যে এই ভিডিওটি এসআরসি আপনি পৃষ্ঠার উত্স পুনরুদ্ধার করতে ব্যবহার করেন এমন ব্রাউজারের সাথে নির্দিষ্ট। আমি মনে করি ইউটিউব এই HTML এইচটিএমএলটি গতিশীলভাবে তৈরি করে (কমপক্ষে বর্তমানে) তাই পরীক্ষায় যদি আমি ফায়ারফক্সে অনুলিপি করি তবে এটি ফায়ারফক্সে কাজ করে তবে ক্রোম নয়, উদাহরণস্বরূপ।


77
মেয়াদোত্তীর্ণতা এবং সত্য যে এটি কেবল একটি নির্দিষ্ট ব্রাউজারে কাজ করে এটি সমাধানটিকে বেশ অকেজো করে তোলে।
pjv

1
এটি কি সমস্ত ইউটিউব ভিডিও খেলতে সক্ষম?
রাজ পবন গমদল

2
যদি তারা যে কোনও সময় চাইলে ইউটিউব তাত্ত্বিকভাবে তাদের সমস্ত ভিডিওর জন্য অন্তর্নিহিত স্টোরেজ URL গুলি পরিবর্তন করতে পারে। srcউপরের বৈশিষ্ট্যটিতে সরবরাহ করা URL টি সম্ভবত দীর্ঘমেয়াদী কাজের গ্যারান্টিযুক্ত নয়।
ক্রিস পিটারস

1
হ্যাঁ, দরকারী তথ্য তবে খারাপ ধারণা বলে মনে হচ্ছে। ইউটিউব যে কোনও সময় সরাসরি ভিডিও লিঙ্কে অ্যাক্সেস বন্ধ করার সিদ্ধান্ত নিতে পারে।
অলিভার মরন

36

এই উত্তরটি আর কাজ করে না, তবে আমি একটি সমাধান খুঁজছি।

হিসাবে । 2015/02/24। এমন একটি ওয়েবসাইট রয়েছে (ইউটিউবইম্প্প 4) যা আপনাকে ইউটিউব ভিডিওগুলি ডাউনলোড করতে দেয় .mp4 format, আপনি <video>ট্যাগগুলিতে ইউটিউব ভিডিও এম্বেড করে দূরে যেতে (কিছু জাভাস্ক্রিপ্ট সহ) এটি ব্যবহার করতে পারেন । এখানে একটি ডেমো রয়েছে কর্মের রয়েছে।

পেশাদাররা

  • বাস্তবায়ন করা মোটামুটি সহজ
  • বেশ দ্রুত সার্ভারের প্রতিক্রিয়া আসলে (ভিডিওগুলি পুনরুদ্ধার করতে খুব বেশি লাগে না)।
  • বিমূর্ততা (স্বীকৃত সমাধান, যদিও এটি সঠিকভাবে কাজ করে, কেবল তখনই প্রযোজ্য যদি আপনি আগেই জানতেন আপনি কোন ভিডিওগুলি খেলবেন, এটি কোনও ব্যবহারকারীর ইনপুটযুক্ত ইউআরএল জন্য কাজ করে))

কনস

  • এটি স্পষ্টতই youtubeinmp4.comসার্ভারগুলি এবং ডাউনলোড লিঙ্ক সরবরাহের তাদের পদ্ধতির উপর নির্ভর করে (যা <video>উত্স হিসাবে পাস করা যেতে পারে ), সুতরাং এই উত্তর ভবিষ্যতে বৈধ নাও হতে পারে।

  • আপনি ভিডিওর মানটি চয়ন করতে পারবেন না।


জাভাস্ক্রিপ্ট (পরে load)

videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
    var video = videos[i];
    var src = video.src || (function () {
        var sources = video.querySelectorAll("source");
        for (var j = 0, sl = sources.length; j < sl; j++) {
            var source = sources[j];
            var type = source.type;
            var isMp4 = type.indexOf("mp4") != -1;
            if (isMp4) return source.src;
        }
        return null;
    })();
    if (src) {
        var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
        if (isYoutube) {
            var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
            id = (id.length > 1) ? id.splice(1) : id;
            id = id.toString();
            var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
            video.src = mp4url + id;
        }
    }
}

ব্যবহার (সম্পূর্ণ)

<video controls="true">
    <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>

স্ট্যান্ডার্ড ভিডিও ফর্ম্যাট।

ব্যবহার (মিনি)

<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>

একটু কম প্রচলিত কিন্তু বেশ ছোট, সংক্ষিপ্ত URL ব্যবহার youtu.beযেমন srcসরাসরি অ্যাট্রিবিউট<video> ট্যাগটিতে ।

আশা করি এটা সাহায্য করবে! :)


মজিলা এবং ক্রোমে দুর্দান্ত ফাংশন এবং কাজ করে তবে <বিডিও> এর 100% প্রস্থ এবং 200px উচ্চতা থাকলে কীভাবে ভিডিওর প্রস্থ এবং উচ্চতা সেট করা যায়।
আনমল রতন মোহলা

আমি এই সমাধানটি প্রয়োগ করেছি, তবে 2 দিন পরে, ওয়াইটি এটি অবরোধ করে। এটি আর কাজ করে না। :(
apires

দুর্ভাগ্যক্রমে এটি আর কাজ করে না। এটি দুর্দান্ত কাজ করত। আমি আশা করি এর আর কোন সমাধান আছে!
চামিলিয়ান

19

দ্য <video>ট্যাগ সমর্থিত ফর্ম্যাটে (যা ব্রাউজার দ্বারা ভিন্ন হতে পারে) এর একটি ভিডিওতে লোড বোঝানো হয়।

ইউটিউব এম্বেড লিঙ্কগুলি কেবল ভিডিও নয়, সেগুলি সাধারণত ওয়েবপৃষ্ঠাগুলি যা আপনার ব্যবহারকারী কী সমর্থন করে এবং কীভাবে তারা ইউটিউব ভিডিও প্লে করতে পারে, কীভাবে এইচটিএমএল 5 বা ফ্ল্যাশ ব্যবহার করে বা ব্যবহারকারী পিসিতে পাওয়া যায় তার উপর ভিত্তি করে অন্য কোনও প্লাগইন সনাক্ত করতে পারে log এই কারণেই আপনি ইউটিউব ভিডিওগুলির সাথে ভিডিও ট্যাগ ব্যবহার করে একটি কঠিন সময় কাটাচ্ছেন।

আপনার পৃষ্ঠায় ইউটিউব ভিডিও এম্বেড করতে ইউটিউব একটি বিকাশকারী এপিআই দেয়।

আমি একটি লাইভ উদাহরণ হিসাবে একটি জেএসফিডেল তৈরি করেছি: http://jsfiddle.net/zub16fgt/

এবং আপনি এখানে ইউটিউব এপিআই সম্পর্কে আরও পড়তে পারেন: https://developers.google.com/youtube/iframe_api_references#Getting_Started

কোডটি নীচেও পাওয়া যাবে

আপনার এইচটিএমএলে:

<div id="player"></div>

আপনার জাভাস্ক্রিপ্টে:

var onPlayerReady = function(event) {
    event.target.playVideo();  
};

// The first argument of YT.Player is an HTML element ID. 
// YouTube API will replace my <div id="player"> tag 
// with an iframe containing the youtube video.

var player = new YT.Player('player', {
    height: 320,
    width: 400,
    videoId : '6Dc1C77nra4',
    events : {
        'onReady' : onPlayerReady
    }
});

আমি সম্প্রতি এই সমস্যাটি পেয়েছি: পূর্ণস্ক্রিন আর আইপ্যাডে সমর্থিত নয়! আপনার jsfiddle- উদাহরণ চিত্রিত করার জন্য নিখুঁত: পিসিতে এটি কাজ করে, আইপ্যাডে নয়। ..আমি এই সম্পর্কে আমার একটি নতুন প্রশ্ন জিজ্ঞাসা করা উচিত, তবে এখানে কেউ হয়তো মন্তব্য করতে পারে?
স্নোরভার্গ

1
@ স্নোরভার্গ আমার উত্তরটি যে কোনও এইচটিএমএল 5 কমপ্লায়েন্ট ব্রাউজারে কাজ করা উচিত, যা আপনি যতক্ষণ না আপনার আইপ্যাডে আইওএস (10+) এর একটি সাম্প্রতিক সংস্করণ চালাবেন এটি কাজ করা উচিত। আপনার যদি প্রোগ্রামটিমেটিকভাবে ভিডিওটি নিয়ন্ত্রণ করার প্রয়োজন না হয়, আপনি সাধারণ iframe এম্বেড এপিআই ব্যবহার করে চেষ্টা করতে পারেন। আপনি এখানে একটি উদাহরণ ডেভেলপারস .google.com/youtube/iframe_api_references# উদাহরণ খুঁজে পেতে পারেন , বা বিনয়ভ্যাসানীর উত্তর দেখতে পারেন। যদি আপনার এখনও সমস্যা হয় তবে আমি স্ট্যাকওভারফ্লো . com/help/how- to-ask এ পাওয়া "একটি ভাল প্রশ্ন জিজ্ঞাসা করব" নির্দেশিকা ব্যবহার করে একটি নতুন প্রশ্ন জিজ্ঞাসা করব ।
নর্মান ব্রেউ

@ স্নোরভার্গ আমি এই প্রোডাক্টফর্মগুলি google.com/forum/#!topic/youtube/q7cAnPlN_-Y জুড়ে এসেছি , এটি একই রকম সমস্যা ফায়ারফক্সে ঘটেছিল এবং এটি সমাধান হয়ে গেছে কারণ তাদের পুরো স্ক্রিন অনুমতিগুলির জন্য অনুরোধ করা দরকার ছিল। সুতরাং আমি বাজি রাখতে ইচ্ছুক যে কেন পুরো পর্দা আপনার আইপ্যাডে কাজ করছে না, যা দুর্ভাগ্যক্রমে আইওএস সাফারি সমর্থন করে না। একটি বিকল্প সমাধান হ'ল আপনার নিজের পূর্ণ স্ক্রীন বোতামটি যুক্ত করা এবং আপনার স্ক্রিনের প্রস্থ / উচ্চতায় ইফ্রেমে প্লেয়ারকে পুনরায় আকার দিন।
নরম্যান ব্রেকো

1
আপনার টিপস এবং লিঙ্কগুলির জন্য ধন্যবাদ। কিছু দিন আগে আমি এখানে একটি প্রশ্ন যুক্ত করেছি: stackoverflow.com/questions/49650040/… তবে কিছুক্ষণ পরে, আমি আপনার নিজের মতো করে একটি ফুলস্ক্রিন বোতাম তৈরি করার সিদ্ধান্ত নিয়েছি এবং এটি ঠিক আছে।
স্নোরভার্গ

এখানে বর্ণিত,: গ্রেট স্টাফ, তবে আমি ত্রুটির মধ্যে চলছে "YT.Player কোন কনস্ট্রাকটর নয় TypeError" stackoverflow.com/questions/52062169/... । (কেবলমাত্র) উত্তরটি উল্লেখ করে, অ্যাসিঙ্ক্রোনাস স্ক্রিপ্ট লোডের এই ফলাফলগুলি এবং ডাকা হওয়ার সময় এপিআই এখনও প্রস্তুত হয়নি। onYouTubeIframeAPIReadyফাংশনটি প্রয়োগ করে (এবং এর মধ্যে উপরের কোডের শেষ কোড ব্লকটি রেখে) এড়ানো যায় ।
jakob.j

1

সবচেয়ে সহজ উত্তরটি ডাব্লু 3 স্কুল দ্বারা দেওয়া হয়েছে। https://www.w3schools.com/html/html_youtube.asp

  1. আপনার ভিডিওটি ইউটিউবে আপলোড করুন
  2. ভিডিও আইডি নোট করুন
  3. এখন আপনার HTML5 এ এই কোডটি লিখুন।
<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>

-3

কিভাবে এটা উপায় কাজ সম্পর্কে hooktube এটা আছে? তারা আসলে এইচটিএমএল 5 উপাদানটির জন্য ভিডিও ইউআরএল ব্যবহার করে না, তবে সেই ভিডিওটিতে কল করা গুগল ভিডিও রিডাইরেক্টর ইউআরএল। তারা কীভাবে কিছু ডিপাসিটো এলোমেলো ভিডিও উপস্থাপন করে তা এখানে দেখুন ...

<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&amp;mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>

কোডটি নীচের ভিডিও পৃষ্ঠার জন্য https://hooktube.com/watch?v=72UO0v5ESUo

অন্যদিকে এমপি 3 থেকে ইউটিউব চূড়ান্তভাবে নগদীকরণ করা দৈত্যে রূপান্তরিত হয়েছে যা ভিডিও ডাউনলোডের অনুরোধের অর্ধেকটিতে এখন ডাউনলোড.এইচটিএমএল ফিরে আসে ... বিরক্তিকর ...

এই উত্তরের 2 টি লিঙ্কগুলি উভয় সংস্থার সাথে আমার ব্যক্তিগত অভিজ্ঞতা। হুকটউবটি কীভাবে সুন্দর এবং তাজা এবং প্রকৃতপক্ষে সেন্সরশিপ এবং জিও বিধিনিষেধগুলি এড়াতে সহায়তা করে .. এটি দেখুন, এটি দুর্দান্ত। এবং youtubeinmp4 হ'ল একটি পপআপ দানব যা এখন কনভার্টআইএনএমপি 4 নামে পরিচিত ...


-6

আপনার ওয়েবসাইটে নতুন ইফ্রেমে ট্যাগ এম্বেড করার সাথে কোডটি স্বয়ংক্রিয়ভাবে সনাক্ত করবে যে আপনি এমন কোনও ব্রাউজার ব্যবহার করছেন যা এইচটিএমএল 5 সমর্থন করে কিনা।

ইউটিউব ভিডিও এম্বেড করার জন্য আইফ্রেমে কোডটি নিম্নরূপ, কেবলমাত্র ভিডিও আইডি অনুলিপি করুন এবং নীচের কোডটিতে প্রতিস্থাপন করুন:

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>

23
"নতুন" iframeট্যাগ? iframeযুগে যুগে প্রায় ছিল ...
জেরিন

11
এটি উত্তরের কোনও সমাধান নয়, এতে স্পষ্টভাবে ভিডিও ট্যাগ বলা হয়েছে এবং আইফ্রেমে নয় ...
টিগারেট

7
সম্ভবত ওপি iframeট্যাগটির অস্তিত্ব সম্পর্কে কেবল জানত না এবং সে কারণেই তিনি সরাসরি videoট্যাগ সম্পর্কে জিজ্ঞাসা করেছিলেন । অন্যথায় তিনি জিজ্ঞাসা করতেন না যে এইচটিএমএল 5 (সাধারণভাবে) ইউটিউব ভিডিওগুলিকে সমর্থন করে তবে তিনি প্রশ্নটি videoট্যাগটিতে সীমাবদ্ধ রাখতেন । এমনকি তিনি জিজ্ঞাসা করেছিলেন "এর জন্য কোনও কর্মসূচি রয়েছে কি?" তার শেষ বাক্যে, সুতরাং এই উত্তরটি পুরোপুরি বৈধ।
ড্যানিয়েল মুয়াজ পার্সাপুরোমঘাদাম

1
আমার ব্লগার.কম ব্লগে youtube.com ভিডিও এম্বেড করতে, iframe হ'ল একমাত্র সুবিধাজনক সমাধান। তার উপরে, youtube.com উত্পন্ন এম্বেড কোডটি একটি আইফ্রেমে ট্যাগ। এছাড়াও, w3schools.com iframes এর প্রস্তাব দেয়: http://www.w3schools.com/html/html_youtube.asp । যেখানে ভিডিও ট্যাগ উল্লেখ করা হয়নি।
noobninja

1
যদি কেউ আগ্রহী হন তবে ... ভিডিও ট্যাগটি ইস্যু করা ইউটিউব ভিডিওগুলির জন্য সঠিক পদ্ধতি নয় কারণ ইউটিউব ভিডিও এম্বেড করার জন্য সর্বজনীন ইউআরএলগুলি কোনও প্রকৃত মিডিয়া সংস্থান নয়। এজন্য সেখানে লোকেরা আইফ্রেমেস ব্যবহারের পরামর্শ দিচ্ছেন। একটি ভিডিও ট্যাগ ব্যবহার করার চেষ্টা করার অর্থ আপনি ভবিষ্যতে পরিবর্তিত হতে পারে এমন ব্যক্তিগত URL গুলি ব্যবহার করবেন। এটি কোনও অবজেক্ট-ভিত্তিক ভাষায় কোনও ব্যক্তিগত সদস্যকে অ্যাক্সেস করার চেষ্টা করার মতো। আপনি এখানে ইউটিউবের অফিশিয়াল ডকুমেন্টেশনগুলি দেখতে পারেন এখানে developers.google.com/youtube/iframe_api_references#
উদাহরণ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.