Html5 ютуб: Как включить HTML5 проигрыватель на YouTube

YouTube полностью перешел с Flash на HTML5. Пользователи раздражены

Интернет Веб-сервисы

|

Поделиться

    Видеохостинг YouTube спустя пять лет после ввода экспериментальной поддержки HTML5 перешел на эту технологию в качестве формата для воспроизведения видео по умолчанию. У пользователей данный шаг вызвал неоднозначную реакцию, некоторые расценили его как несколько поспешный.

    Крупнейший видеохостинг YouTube, принадлежащий корпорации Google, отказался от использования Adobe Flash в качестве технологии для воспроизведения видео в веб-браузерах по умолчанию. Место Flash заняла технология HTML5, сообщил в блоге хостинга руководитель технических работ в YouTube

    Ричард Лейдер (Richard Leider).

    Google около пяти лет назад ввела в YouTube наряду с Flash поддержку HTML5. Однако, если пользователь желал получать видео именно в формате HTML5, до сих пор ему для этого приходилось проходить по ссылке YouTube.com/HTML5.

    Компания не делала HTML5 стандартом по умолчанию из-за некоторых присутствующих в нем ограничений. Наиболее важным из них было отсутствие поддержки метода Adaptive Bitrate (ABR), рассказал Лейдер.

    ABR позволяет сократить время буферизации при медленном соединении и открывать большее количество видеороликов одновременно за счет автоматической адаптации параметров видео, таких как разрешение и битрейт. По данным YouTube, ABR позволил сократить время буферизации на 50% в среднем и на 80% — в перегруженных сетях.

    Помимо отсутствия поддержки ABR, в HTML5 были и другие недочеты. «Последние четыре года вместе с разработчиками браузеров их устранили, и теперь YouTube использует тег HTML5 <video> по умолчанию в Chrome, IE 11, Safari 8 и бета-версиях Firefox», — сообщил Лейдер.


    YouTube перешел на HTML5 в качестве технологии по умолчанию

    Пользователи нововведение YouTube восприняли неоднозначно. Трое из них в комментариях к записи сослались на баг в Google Chrome, возникающий при обработке тега <video>. Он заключается в том, что браузер создает два HTTP-запроса при открытии видео, один из которых висит до тех пор, пока пользователь не закроет вкладку. Это приводит к тому, что при открытии большого количества вкладок с видео, видео на новых вкладках не начинает грузиться, пока не будут закрыты другие вкладки (с подвисшими запросами). «Вы не оставляете нам другого выбора, кроме как перейти на Firefox, так как такая работа браузера раздражает», — написал в комментариях

    Дэвин МакКейб (Devin McCabe).

    Сможет ли Россия преодолеть кадровый дефицит в сфере ИТ

    Поддержка ИТ-отрасли

    Технология Flash позволяет создавать анимацию на веб-сайтах. Она была разработана компанией Macromedia, а в 2005 г. эта компания была приобретена корпорацией Adobe Systems (разработчиком Photoshop и других популярных программ для работы с графикой).

    В последние годы многие компании стали отказываться от поддержки Flash в своих продуктах, включая Microsoft (в Internet Explorer для Windows 8) и Google (в Android). Считается, что толчком к таким решениям послужило открытое письмо бывшего главы Apple Стива Джобса (Steve Jobs), опубликованное им в 2010 г. В письме Джобс объяснил, что они не добавляют поддержку Flash в мобильную платформу iOS из-за того, что она слишком медленно работает, потребляет много энергии и содержит большое количество уязвимостей.

    Язык разметки веб-страниц HTML5 лишен этих недостатков, прежде всего, потому что это открытая технология, разрабатываемая совместно большим количеством компаний (в их число входят и Google, и Apple). Технология Flash, в свою очередь, является проприетарной, закрытой. Напомним, что работа над спецификацией HTML5 была завершена в октябре 2014 г.

    • 10 функций Telegram, о которых вы не знали: наводим порядок в чатах

    Сергей Попсулин


    Как получить тип тега source в html5 video на YouTube?

    Пользуйтесь уже имеющимся кодом для скачивания видео с тытрубки, всё реализовано до вас. Если очень хочется делать всё ручками, то разбирайте код жабоскрипта, в котором и содержатся интересующие вас данные. Например, на первой попавшейся странице с плеером HTML5 на YouTube в коде можно заметить:

    var ytplayer = ytplayer || {};ytplayer.config = {"assets":{"css":"\/\/s.ytimg.com\/yts\/cssbin\/www-player-new-vflgEPPga.css","js":"\/\/s.ytimg.com\/yts\/jsbin\/html5player-new-en_US-vflx6L8FI\/html5player-new.js"},"url_v8":"http:\/\/s.ytimg.com\/yts\/swfbin\/player-vflbGGFmi\/cps.swf","sts":16735,"url_v9as2":"http:\/\/s.ytimg.com\/yts\/swfbin\/player-vflbGGFmi\/cps. swf","messages":{"player_fallback":["Adobe Flash Player or an HTML5 supported browser is required for video playback.\u003cbr\u003e\u003ca href=\"http:\/\/get.adobe.com\/flashplayer\/\"\u003eGet the latest Flash Player \u003c\/a\u003e\u003cbr\u003e\u003ca href=\"\/html5\"\u003eLearn more about upgrading to an HTML5 browser\u003c\/a\u003e"]},"params":{"allowfullscreen":"true","allowscriptaccess":"always","bgcolor":"#000000"},"args":{"timestamp":"1445985086","sffb":true,"allow_embed":"1","user_gender":"m","author":"WarpOut","iurlsd":"http:\/\/i.ytimg.com\/vi\/i7PQ9IO-7fU\/sddefault.jpg","no_get_video_log":"1","c":"WEB","adaptive_fmts":"size=1920x1080\u0026index=713-1704\u0026projection_type=1\u0026fps=24\u0026bitrate=4128390\u0026clen=107453625\u0026type=video%2Fmp4%3B+codecs%3D%22avc1.640028%22\u0026init=0-712\u0026itag=137\u0026quality_label=1080p\u0026lmt=1441184970413183\u0026url=http%3A%2F%2Fr1---sn-xguxaxjvh-31oe.googlevideo.com%2Fvideoplayback%3Fsver%3D3%26dur%3D422.374%26signature%3D9202C41B0CF8FBCE3A166A225DAB659D8BEC6E2E. D737FDB504459C256588D897BD513B959920C3E8%26initcwndbps%3D3415000%26cwbhb%3Dyes%26keepalive%3Dyes%26clen%3D107453625%26itag%3D137%26ipbits%3D0%26upn%3DZvD0vDIGbg4%26key%3Dyt6%26expire%3D1446006686%26id%3Do-AGEefyrMjFpQIEpOLLg1rou7FbLBDGNGJrmNWIfzK_YJ%26ms%3Dau%26mt%3D1445984927%26mv%3Dm%26mm%3D31%26source%3Dyoutube%26pl%3D20%26mn%3Dsn-xguxaxjvh-31oe%26mime%3Dvideo%252Fmp4%26ip%3D92.255.195.69%26fexp%3D9405982%252C9407745%252C9408710%252C9414764%252C9415521%252C9416126%252C9416916%252C9417224%252C9417707%252C9418204%252C9418997%252C9419354%252C9419444%252C9419745%252C9420540%252C9422339%252C9422431%252C9423306%26sparams%3Dclen%252Ccwbhb%252Cdur%252Cgir%252Cid%252Cinitcwndbps%252Cip%252Cipbits%252Citag%252Ckeepalive%252Clmt%252Cmime%252Cmm%252Cmn%252Cms%252Cmv%252Cpl%252Csource%252Cupn%252Cexpire%26lmt%3D1441184970413183%26gir%3Dyes,size=1280x720\u0026index=711-1702\u0026projection_type=1\u0026fps=24\u0026bitrate=2204323\u0026clen=56270760\u0026type=video%2Fmp4%3B+codecs%3D%22avc1.4d401f%22\u0026init=0-710\u0026itag=136\u0026quality_label=720p\u0026lmt=1441186483538674\u0026url=http%3A%2F%2Fr1---sn-xguxaxjvh-31oe. googlevideo.com%2Fvideoplayback%3Fsver%3D3%26dur%3D422.374%26signature%3D05F2CE5DF7C4B748A7251CEC93897FF6DE2C855A.98FED6AA039B11C0E13ADDA3039933F3A0EE09F3%26initcwndbps%3D3415000%26cwbhb%3Dyes%26keepalive%3Dyes%26clen%3D56270760%26itag%3D136%26ipbits%3D0%26upn%3DZvD0vDIGbg4%26key%3Dyt6%26expire%3D1446006686%26id%3Do-AGEefyrMjFpQIEpOLLg1rou7FbLBDGNGJrmNWIfzK_YJ%26ms%3Dau%26mt%3D1445984927%26mv%3Dm%26mm%3D31%26source%3Dyoutube%26pl%3D20%26mn%3Dsn-xguxaxjvh-31oe%26mime%3Dvideo%252Fmp4%26ip%3D92.255.195.69%26fexp%3D9405982%252C9407745%252C9408710%252C9414764%252C9415521%252C9416126%252C9416916%252C9417224%252C9417707%252C9418204%252C9418997%252C9419354%252C9419444%252C9419745%252C9420540%252C9422339%252C9422431%252C9423306%26sparams%3Dclen%252Ccwbhb%252Cdur%252Cgir%252Cid%252Cinitcwndbps%252Cip%252Cipbits%252Citag%252Ckeepalive%252Clmt%252Cmime%252Cmm%252Cmn%252Cms%252Cmv%252Cpl%252Csource%252Cupn%252Cexpire%26lmt%3D1441186483538674%26gir%3Dyes,size=854x480\u0026index=710-1701\u0026projection_type=1\u0026fps=24\u0026bitrate=1102634\u0026clen=29117072\u0026type=video%2Fmp4%3B+codecs%3D%22avc1. 4d401e%22\u0026init=0-709\u0026itag=135\u0026quality_label=480p\u0026lmt=1441186509439925\u0026url=http%3A%2F%2Fr1---sn-xguxaxjvh-31oe.googlevideo.com%2Fvideoplayback%3Fsver%3D3%26dur%3D422.374%26signature%3D5401F32C6479356A59C57A804EB6125B5BF6774B.CBD2FEEC8BB094552CC44FBB6E0020F59604A196%26initcwndbps%3D3415000%26cwbhb%3Dyes%26keepalive%3Dyes%26clen%3D29117072%26itag%3D135%26ipbits%3D0%26upn%3DZvD0vDIGbg4%26key%3Dyt6%26expire%3D1446006686%26id%3Do-AGEefyrMjFpQIEpOLLg1rou7FbLBDGNGJrmNWIfzK_YJ%26ms%3Dau%26mt%3D1445984927%26mv%3Dm%26mm%3D31%26source%3Dyoutube%26pl%3D20%26mn%3Dsn-xguxaxjvh-31oe%26mime%3Dvideo%252Fmp4%26ip%3D92.255.195.69%26fexp%3D9405982%252C9407745%252C9408710%252C9414764%252C9415521%252C9416126%252C9416916%252C9417224%252C9417707%252C9418204%252C9418997%252C9419354%252C9419444%252C9419745%252C9420540%252C9422339%252C9422431%252C9423306%26sparams%3Dclen%252Ccwbhb%252Cdur%252Cgir%252Cid%252Cinitcwndbps%252Cip%252Cipbits%252Citag%252Ckeepalive%252Clmt%252Cmime%252Cmm%252Cmn%252Cms%252Cmv%252Cpl%252Csource%252Cupn%252Cexpire%26lmt%3D1441186509439925%26gir%3Dyes,size=640x360\u0026index=710-1701\u0026projection_type=1\u0026fps=24\u0026bitrate=602389\u0026clen=14677870\u0026type=video%2Fmp4%3B+codecs%3D%22avc1. 4d401e%22\u0026init=0-709\u0026itag=134\u0026quality_label=360p\u0026lmt=1441186480705375\u0026url=http%3A%2F%2Fr1---sn-xguxaxjvh-31oe.googlevideo.com%2Fvideoplayback%3Fsver%3D3%26dur%3D422.374%26signature%3DE3C1420821F980DD7CDBE902A076D985EEB1C654.ABB9F68163945DDF071A693C3370C50A80590AF2%26initcwndbps%3D3415000%26cwbhb%3Dyes%26keepalive%3Dyes%26clen%3D14677870%26itag%3D134%26ipbits%3D0%26upn%3DZvD0vDIGbg4%26key%3Dyt6%26expire%3D1446006686%26id%3Do-AGEefyrMjFpQIEpOLLg1rou7FbLBDGNGJrmNWIfzK_YJ%26ms%3Dau%26mt%3D1445984927%26mv%3Dm%26mm%3D31%26source%3Dyoutube%26pl%3D20%26mn%3Dsn-xguxaxjvh-31oe%26mime%3Dvideo%252Fmp4%26ip%3D92.255.195.69%26fexp%3D9405982%252C9407745%252C9408710%252C9414764%252C9415521%252C9416126%252C9416916%252C9417224%252C9417707%252C9418204%252C9418997%252C9419354%252C9419444%252C9419745%252C9420540%252C9422339%252C9422431%252C9423306%26sparams%3Dclen%252Ccwbhb%252Cdur%252Cgir%252Cid%252Cinitcwndbps%252Cip%252Cipbits%252Citag%252Ckeepalive%252Clmt%252Cmime%252Cmm%252Cmn%252Cms%252Cmv%252Cpl%252Csource%252Cupn%252Cexpire%26lmt%3D1441186480705375%26gir%3Dyes,size=426x240\u0026index=675-1666\u0026projection_type=1\u0026fps=24\u0026bitrate=251001\u0026clen=12613725\u0026type=video%2Fmp4%3B+codecs%3D%22avc1. 4d4015%22\u0026init=0-674\u0026itag=133\u0026quality_label=240p\u0026lmt=1441186480845046\u0026url=http%3A%2F%2Fr1---sn-xguxaxjvh-31oe.googlevideo.com%2Fvideoplayback%3Fsver%3D3%26dur%3D422.374%26signature%3D8774AC3FE7CCA6A0F5F12B3DF43F53ACB173DFCA.9AF21A49D41E6FC620C3113405AE218CE8FF68EE%26initcwndbps%3D3415000%26cwbhb%3Dyes%26keepalive%3Dyes%26clen%3D12613725%26itag%3D133%26ipbits%3D0%26upn%3DZvD0vDIGbg4%26key%3Dyt6%26expire%3D1446006686%26id%3Do-AGEefyrMjFpQIEpOLLg1rou7FbLBDGNGJrmNWIfzK_YJ%26ms%3Dau%26mt%3D1445984927%26mv%3Dm%26mm%3D31%26source%3Dyoutube%26pl%3D20%26mn%3Dsn-xguxaxjvh-31oe%26mime%3Dvideo%252Fmp4%26ip%3D92.255.195.69%26fexp%3D9405982%252C9407745%252C9408710%252C9414764%252C9415521%252C9416126%252C9416916%252C9417224%252C9417707%252C9418204%252C9418997%252C9419354%252C9419444%252C9419745%252C9420540%252C9422339%252C9422431%252C9423306%26sparams%3Dclen%252Ccwbhb%252Cdur%252Cgir%252Cid%252Cinitcwndbps%252Cip%252Cipbits%252Citag%252Ckeepalive%252Clmt%252Cmime%252Cmm%252Cmn%252Cms%252Cmv%252Cpl%252Csource%252Cupn%252Cexpire%26lmt%3D1441186480845046%26gir%3Dyes,size=256x144\u0026index=672-1663\u0026projection_type=1\u0026fps=12\u0026bitrate=109395\u0026clen=5612068\u0026type=video%2Fmp4%3B+codecs%3D%22avc1. 4d400c%22\u0026init=0-671\u0026itag=160\u0026quality_label=144p\u0026lmt=1441186480946934\u0026url=http%3A%2F%2Fr1---sn-xguxaxjvh-31oe.googlevideo.com%2Fvideoplayback%3Fsver%3D3%26dur%3D422.416%26signature%3D1E28FB3D38E8B6E460EE30809AE341CB42C80C87.0A1BA4B4018A51A8DD01864DC8B3C8A42F14A40E%26initcwndbps%3D3415000%26cwbhb%3Dyes%26keepalive%3Dyes%26clen%3D5612068%26itag%3D160%26ipbits%3D0%26upn%3DZvD0vDIGbg4%26key%3Dyt6%26expire%3D1446006686%26id%3Do-AGEefyrMjFpQIEpOLLg1rou7FbLBDGNGJrmNWIfzK_YJ%26ms%3Dau%26mt%3D1445984927%26mv%3Dm%26mm%3D31%26source%3Dyoutube%26pl%3D20%26mn%3Dsn-xguxaxjvh-31oe%26mime%3Dvideo%252Fmp4%26ip%3D92.255.195.69%26fexp%3D9405982%252C9407745%252C9408710%252C9414764%252C9415521%252C9416126%252C9416916%252C9417224%252C9417707%252C9418204%252C9418997%252C9419354%252C9419444%252C9419745%252C9420540%252C9422339%252C9422431%252C9423306%26sparams%3Dclen%252Ccwbhb%252Cdur%252Cgir%252Cid%252Cinitcwndbps%252Cip%252Cipbits%252Citag%252Ckeepalive%252Clmt%252Cmime%252Cmm%252Cmn%252Cms%252Cmv%252Cpl%252Csource%252Cupn%252Cexpire%26lmt%3D1441186480946934%26gir%3Dyes,bitrate=128209\u0026lmt=1441184480063832\u0026index=592-1139\u0026clen=6711016\u0026init=0-591\u0026projection_type=1\u0026type=audio%2Fmp4%3B+codecs%3D%22mp4a. 40.2%22\u0026url=http%3A%2F%2Fr1---sn-xguxaxjvh-31oe.googlevideo.com%2Fvideoplayback%3Fsver%3D3%26dur%3D422.510%26signature%3D7042D94BCCB4BA3EA2FB86CBD939A96935A90B8D.9AD051D5E30D8244D377A2FEAD86F70A5C879872%26initcwndbps%3D3415000%26cwbhb%3Dyes%26keepalive%3Dyes%26clen%3D6711016%26itag%3D140%26ipbits%3D0%26upn%3DZvD0vDIGbg4%26key%3Dyt6%26expire%3D1446006686%26id%3Do-AGEefyrMjFpQIEpOLLg1rou7FbLBDGNGJrmNWIfzK_YJ%26ms%3Dau%26mt%3D1445984927%26mv%3Dm%26mm%3D31%26source%3Dyoutube%26pl%3D20%26mn%3Dsn-xguxaxjvh-31oe%26mime%3Daudio%252Fmp4%26ip%3D92.255.195.69%26fexp%3D9405982%252C9407745%252C9408710%252C9414764%252C9415521%252C9416126%252C9416916%252C9417224%252C9417707%252C9418204%252C9418997%252C9419354%252C9419444%252C9419745%252C9420540%252C9422339%252C9422431%252C9423306%26sparams%3Dclen%252Ccwbhb%252Cdur%252Cgir%252Cid%252Cinitcwndbps%252Cip%252Cipbits%252Citag%252Ckeepalive%252Clmt%252Cmime%252Cmm%252Cmn%252Cms%252Cmv%252Cpl%252Csource%252Cupn%252Cexpire%26lmt%3D1441184480063832%26gir%3Dyes\u0026itag=140" . ..

    Этот код должен наводить вас на мысль, как извлечь данные. Если не наводит, то вам рано этим заниматься, просто воспользуйтесь готовым решением и не изобретайте велосипед.

    seo — видео с тегом Html5 VS видео с Youtube

    Лучше ли вставлять видео с Youtube в iframe или загружать видео в тег HTML5?

    Что лучше с точки зрения SEO?

    Есть ли разница во времени загрузки, оптимизации и обслуживании?

    • SEO
    • html5
    • видео
    • youtube

    Оба имеют преимущества и недостатки. Как сказал @Evgeniy, с точки зрения SEO разницы нет. Важно SEO вашей страницы, которая включает видео, независимо от его источника.

    Когда вы встраиваете видео с YouTube, сервисом занимается Google. Вашему веб-сайту нужно только вывести код для iframe, а YouTube сделает все остальное, так что с пропускной способностью вы будете использовать YouTube. Есть также поведение, которое исходит от YouTube, некоторые из которых можно настроить, но, по сути, YouTube решает, как люди воспринимают ваше видео, включая выбор версии для показа, поскольку YouTube создает потоки разного разрешения для доставки на разные устройства.

    Видеотег HTML5 проще, что дает вам больше контроля, но также и больше работы, в зависимости от необходимых вам функций. Все поступает с одного и того же сервера, поэтому бывают случаи, когда браузер откладывает загрузку видео по сравнению с iframe, атрибут src которого указывает на другой сервер. Это происходит потому, что большинство браузеров имеют ограничение на количество соединений на хост, поэтому, если с вашего сайта все еще загружаются ресурсы, он будет ждать загрузки , в то время как он не будет ждать загрузки