it-swarm.com.ru

Показать источник видео с YouTube в теге HTML5?

Я пытаюсь вставить источник видео YouTube в тег HTML5 <video>, но, похоже, он не работает. После некоторого поиска в Google я обнаружил, что HTML5 не поддерживает URL видео YouTube в качестве источника.

Можете ли вы использовать HTML5 для встраивания видео на YouTube? Если нет, есть ли обходной путь?

92
sri

Шаг 1: добавьте &html5=True в ваш любимый URL YouTube

Шаг 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.

Все еще проверяю себя.

Редактировать (28 июля 2011 г.): Обратите внимание, что этот видеоролик относится к браузер, который вы используете для получения источника страницы. Я думаю, что YouTube генерирует этот HTML-код динамически (по крайней мере в настоящее время), поэтому при тестировании, если я копирую в Firefox, это работает в Firefox, но не в Chrome, например.

14
Simon Flack

Этот ответ больше не работает, но я ищу решение.

По состоянию на . 2015/02/24. существует веб-сайт (youtubeinmp4) , который позволяет загружать видео на YouTube в .mp4 format вы можете использовать это (с небольшим количеством JavaScript), чтобы избежать встраивания видео на YouTube в теги <video>. Вот демо этого в действии.

Pros

  • Довольно легко реализовать .
  • Довольно быстрый ответ сервера на самом деле (для извлечения видео не требуется много времени).
  • Абстракция (принятое решение, даже если оно работает должным образом, будет применимо, только если вы заранее знали, какие видео вы собираетесь воспроизводить, это работает для любого введенный пользователем URL).

Cons

  • Очевидно, что это зависит от серверов 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>

Чуть менее распространенный, но довольно маленький, использующий сокращенный URL-адрес youtube.be и атрибут src непосредственно в теге <video>.

Надеюсь, поможет! :)

35
undefined

Тег <video> предназначен для загрузки видео в поддерживаемом формате (который может отличаться в зависимости от браузера).

Ссылки YouTube для встраивания - это не просто видео, это, как правило, веб-страницы, которые содержат логику для определения того, что поддерживает ваш пользователь и как они могут воспроизводить видео на YouTube, используя HTML5 или flash, или какой-либо другой плагин на основе того, что доступно на ПК пользователя. Вот почему вам трудно использовать тег видео с видео на YouTube.

YouTube предлагает API для разработчиков, чтобы встроить видео YouTube на свою страницу.

Я сделал JSFiddle как живой пример: http://jsfiddle.net/zub16fgt/

Подробнее об API YouTube можно прочитать здесь: 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
    }
});
16
Norman Breau