html5 видео

1. Зачем закрыл от индекса? Поисковики увидят на странице iframe на который им нельзя даже взглянуть и обидятся. Ютуб например поступает так: на странице плейера ставит

<link rel="canonical" href="урл той страницы на ютубе" />

2. Flash = зло.

3. Что значит видео перестает разворачиваться? В iframe стоит аргумент allowfullscreen?

В html5 видеотэгом должно быть что-то вроде такого:

<video preload controls poster="file.jpg">

<source src="fiel.mp4" type="video/mp4">

<source src="file.webm" type="video/webm; codecs=vp8,vorbis" />

<source src="fileogv" type="video/ogg; codecs=theora,vorbis" />

    

А на страницу с где видео показывается как iframe должно быть что-то типа такого:

 <iframe src="http://стaница-с-видео.html" allowfullscreen=""></iframe>

Обрати внимание на allowfullscreen=""

<link rel="canonical" href="урл той страницы на ютубе" />

<video preload controls poster="file.jpg">

<source src="fiel.mp4" type="video/mp4">

<source src="file.webm" type="video/webm; codecs=vp8,vorbis" />

<source src="fileogv" type="video/ogg; codecs=theora,vorbis" />

    

 <iframe src="http://стaница-с-видео.html" allowfullscreen=""></iframe>

allowfullscreen="" добавил к выводу фреймов и проблема решилась)) Спасибо большое

Flowplayer

Webm не поддерживается iOS, Android, Сафари, Opera (Windows) и более половиной устройств;

Полный список http://en.wikipedia.org/wiki/HTML5_video#Browser_support

Провести тест саому можно здесь http://www.quirksmode.org/html5/tests/video.html

В данный момент H.264 кодекс в виде mp4/m4v контейнеров работает на всех броузерах.

Хром первым запрашивает именно H.264 поэтому первым в списке следует ставить именно .mp4

Ниже пример кода видео которое работает на любом устройстве http://7ru.org/v/lolita/videotag.html

Целиком код с этой страницы со стилямиhttp://7ru.org/v/lolita/videotag.txt

Этот пример я делал для демонстрации работы видео на iPad и до того как Файрфокс стал поддерживать mp4, поэтому видео стоит в классической последовательности MP4->WebM->OGG. С ноября 2014 WebM и OGG можно игнорировать

<video id="video_background" preload controls autoplay>
    <source src="lolita.mp4" type="video/mp4" />
    <source src="lolita.ogv" type="video/ogg; codecs=theora,vorbis" />
    <source src="lolita.webm" type="video/webm; codecs=vp8,vorbis" />
   
  <object width="100%" height="auto" type="application/x-shockwave-flash"
     data="flowplayer-3.2.1.swf">
    <param name="movie" value="flowplayer-3.2.1.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="flashvars" 
		value="config={'clip': {'url': 'http://v.7ru.co/v/lolita/lolita.mp4', 'autoPlay':true, 'autoBuffering':true}}" />
    <p>Download video as <a href="lolita.mp4">MP4</a>, <a href="lolita.webm">WebM</a>, or <a href="lolita.ogv">OGG</a>.</p>
  </object>
</video>
<script>
  var v = document.getElementById("movie");
  v.onclick = function() {
    if (v.paused) {
      v.play();
    } else {
      v.pause();
    }
  };
</script>

Теперь если хочется расшарить это видео при помощи iframe то для вставки в другую вебстраницу можно использовать следующий код (стили респансив):

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='embed-container'><iframe src='http://7ru.org/v/lolita/videotag.html' style='border:0'></iframe></div>