將Youtube視頻源顯示爲HTML5視頻標籤？

我正在嘗試將YouTube視頻源添加到HTML5 <video>標記中，但似乎不起作用。經過一些Google搜索後，我發現HTML5不支持YouTube視頻網址作爲來源。將Youtube視頻源顯示爲HTML5視頻標籤？

您可以使用HTML5嵌入YouTube視頻嗎？如果沒有，是否有任何解決方法？

2011-03-01 sri

IFrame解決方案，如下所示http://stackoverflow.com/questions/5157377/show-youtube-video-source-into-html5-video-tag ＃answer-5345148應該足以成爲解決方法。 – 2017-03-19 13:34:46

第1步：添加&html5=True您最喜愛的YouTube網址

第2步：查找源<video/>標籤

第三步：添加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字符串將工作多長時間。

仍在測試自己。

編輯（2011年7月28日）：注意，這段視頻SRC是特定於您使用檢索網頁的源文件瀏覽器。我認爲Youtube動態地（至少當前）生成這個HTML，所以在測試中，如果我複製到Firefox中，這在Firefox中可用，但不在Chrome中。

來源

2011-03-17 20:19:51

+41

僅在特定瀏覽器中有效的過期和事實使得此解決方案非常無用。 – pjv 2011-11-05 21:04:59

它能夠播放所有的YouTube視頻嗎？ – 2012-06-11 06:27:15

有用的信息，但這不是一個解決方案。 – 2013-03-19 21:32:58

隨着您的網站中嵌入新的iframe標籤，代碼將自動檢測您是否使用支持HTML5的瀏覽器。

嵌入YouTube視頻iframe的代碼如下，簡單地複製視頻ID，並在下面的代碼替換：

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

來源

2011-03-17 20:56:51 vinayvasyani

+25

問題是針對視頻標籤嗎？ – 2013-11-07 12:53:05

+12

「新」iframe標籤？ 'iframe'已經存在很久了... – Zearin 2013-12-11 18:38:48

@vinayvasyani：謝謝 – 2014-01-24 20:42:02

有沒有辦法做到這一點沒有JavaScript。但奇妙的MediaElement.js庫將奇妙的工作，爲了這個目的：

http://mediaelementjs.com/examples/?name=youtube

上面的示例使用了<video>標籤YouTube視頻節目，而且還具有回退到閃光燈不支持的瀏覽器它。

來源

2013-11-21 15:08:45 kinabalu

此答案無效，但我正在尋找解決方案。

自起。 2015/02/24。有一個website (youtubeinmp4)，它允許你下載.mp4 format的youtube視頻，你可以利用此（以一些JavaScript）來擺脫嵌入youtube視頻<video>標籤。這是行動中的demo。

優點

相當容易實現。
相當快速服務器響應實際上（它並不需要太多來檢索視頻）。
抽象（被接受的解決方案，即使它工作正常，只有在您事先知道您將播放哪些視頻，適用於任何用戶輸入的網址時才適用。

缺點

這顯然取決於youtubeinmp4.com服務器及其提供的下載鏈接（可作爲<video>源傳遞）的方式，所以這個答案可能無法在未來有效。
您無法選擇視頻質量。

的JavaScript（`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>

有點不太常見，但十分小，使用youtube.be縮短的URL並直接在src屬性在<video>標籤。

希望它有幫助！ :)

來源

2015-02-24 03:50:41 undefined

有效，但不會顯示預覽。 – 2016-01-12 21:46:52

不錯的功能，適用於Mozilla和Chrome，但如何設置視頻寬度和高度，如果

我已經實施了這個解決方案，但2天后，YT封鎖了它。它不再工作了。（ – doutriforce 2017-05-03 20:02:16

<video>標記旨在加載支持格式的視頻（可能因瀏覽器而異）。

YouTube嵌入式鏈接不僅僅是視頻，它們通常是包含邏輯的網頁，用於檢測用戶支持的內容以及他們如何使用HTML5或Flash或其他基於可用內容的插件播放YouTube視頻用戶PC。這就是爲什麼在YouTube視頻中使用視頻標籤時遇到困難的原因。

YouTube確實提供了一個開發者API來將youtube視頻嵌入到您的網頁中。

我做了一個的jsfiddle作爲一個活生生的例子：http://jsfiddle.net/zub16fgt/

而且你可以閱讀更多有關在YouTube API在這裏：https://developers.google.com/youtube/iframe_api_reference#Getting_Started

的代碼也可以低於

在HTML中發現：

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

在JavaScript：

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 
    } 
});

來源

2015-03-22 01:32:10

-6

<iframe allowfullscreen="true" 
     allowscriptaccess="always" 
     frameborder="0" 
     height="100%" 
     width="100%" 
     scrolling="no" 
     src="//www.youtube.com/embed/VIDEO_ID"> 
</iframe>

來源

2015-10-27 09:47:02

-2

試試這一個，將工作

<object width="640" height="390"> 
    <param name="movie" 
     value="https://www.youtube.com/v/atI4JKFQYoU"></param> 
    <param name="allowScriptAccess" value="always"></param> 
    <embed src="https://www.youtube.com/v/atI4JKFQYoU" 
     type="application/x-shockwave-flash" 
     allowscriptaccess="always" 
     width="422" height="258"></embed> 
</object>

來源

2017-01-13 06:57:44

這個答案現在已經過時，因爲大多數主流瀏覽器默認情況下禁用了閃存。今天更好的解決方案。https://developers.google.com/youtube/player_parameters – 2017-08-29 16:08:52

如何這樣做的方式hooktube不是嗎？他們實際上並未使用html5元素的視頻網址，而是調用該視頻的Google視頻重定向器網址。看看這裏是他們如何介紹一些despacito隨機視頻......

<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

youtubeinmp4，另一方面已經變成現在返回download.html非常的營利怪物在一半的視頻下載請求...煩人...

這個答案中的2個鏈接是我對這兩個資源的個人經驗。如何hooktube是好的和新鮮的，實際上有助於避免審查和地理限制..檢查出來，這很酷。而youtubeinmp4是一個彈出式怪物，現在稱爲ConvertInMp4 ...

來源

2017-11-07 18:18:18

將Youtube視頻源顯示爲HTML5視頻標籤？

回答

此答案無效，但我正在尋找解決方案。

優點

缺點

的JavaScript（load後）

使用（全）

用法（贈送）

相關問題

的JavaScript（`load`後）