1. Теперь за форумную активность начисляются биткоины и другие криптоденьги. Подробнее.
    Скрыть объявление
  2. Появилась архивная версия форума arhiv.xaker.name, где собраны темы с 2007 по 2012 год.
    Скрыть объявление

По просьбе rijy))) [Обо всем по немногу-Html5]

Тема в разделе "CSS, HTML, JS", создана пользователем хопкинс, 30 июн 2013.

  1. хопкинс
    хопкинс Новичок
    Симпатии:
    35
    Честно говоря это "золотая жила" для написания статей...Начну я пока с самых основ, а там посмотрим)))

    Прежде чем начать писать статью я хотел бы напомнить некоторые моменты:
    1.Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм...знайте!!! Все уже прекрасно поддерживается всеми браузерами))
    2.В HTML5 есть только один доктайп- А это значит что вам будет легко "обновиться", достаточно лишь прописать
    HTML:
    <!DOCTYPE html>
    и вуаля))
    3.Не надо менять имеющееся.Если ваше веб-приложение сегодня работает в HTML4, оно также будет работать в HTML5.

    Итак, первое о чем я бы хотел поговорить это видео...предупреждаю сразу-"статья не для слабонервных"*mrgreen*, позже узнаете почему))
    Любой человек который хоть раз вставлял видео на свой сайт знает, что
    До HTML5 не существовало стандартного способа сделать это... Все видео были добавлены через сторонние плагины вроде QuickTime, RealPlayer или Flash (на YouTube используется именно он)

    HTML5 определяет стандартный способ вставки видео на веб-страницу с помощью элемента
    HTML:
    <video>
    Хочу предупредить сразу:mda:...В данный момент
    HTML:
    <video>
    практически не работает...Но не отчаиваетесь! Есть альтернативные способы добавления)))

    По сути HTML5 включает элемент
    HTML:
    <video>
    для встраивания видео на веб-страницу. Нет никаких ограничений на видеокодек, аудиокодек или формат файла, которые вы можете использовать для вашего видео.Один элемент
    HTML:
    <video>
    может содержать ссылки на несколько файлов, браузер же выберет первый файл, который он сможет воспроизвести.

    А вот теперь вернемся к вопросу, почему же это "статья не для слабонервных"?! Да вот почему!!!


    Так как же все-таки вставить видео на сайт?!

    HTML5 предоставляет вам два способа включения видео на веб-страницу и оба связаны с элементом
    HTML:
    <video>
    Если у вас есть только один видеофайл, вы можете дать ссылку на него в атрибуте src(Но как говорилось выше...одним видео обойтись не получится). Кстати это похоже на добавление изображения через тег
    HTML:
    <img src="...">.
    HTML:
    <video src="01.оgg"></video>
    Подобно тегу
    HTML:
    <img>
    вы должны всегда включать атрибуты width и height в тег
    HTML:
    <video>
    По умолчанию для элемента
    HTML:
    <video>
    не добавляются кнопки управления. Вы можете создать собственные элементы управления со старым добрым HTML, CSS, и JavaScript. Для
    HTML:
    <video>
    действуют такие методы как play() и pause (), а также свойство currentTime. Есть также свойства volume и muted.

    Если вы не желаете создавать свой интерфейс, то можете сказать браузеру вывести встроенные элементы управления. Для этого просто включите атрибут controls в тег <video>.
    HTML:
    <video src="01.оgg" width="320" height="240" controls></video>

    preload и autoplay


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

    Атрибут autoplay делает именно то, как и звучит: говорит браузеру, что вы хотели бы начать загрузку видеофайла при загрузке страницы, и желаете воспроизвести видео автоматически при возможности.

    Тут можно было бы уже открыть шампанское, но я надеюсь вы не забыли...
    А это значит, мы делаем следующее!

    Делаем три видео в разных контейнерах. Один это OGV, второй MP4, третий WebM.

    HTML5 обеспечивает способ сделать ссылки на все три файла с помощью элемента
    HTML:
    <source>
    Каждый элемент
    HTML:
    <video>
    может содержать более одного тега
    HTML:
    <source>
    . Ваш браузер пройдется по списку источников видео по порядку и выберет первым то, что он в состоянии воспроизвести.

    Еще я вам настоятельно рекомендую использовать трибут type тега
    HTML:
    <source>
    .
    Все потому, что вы сэкономите много трафика, если сообщите браузеру информацию о каждом видео т.к он загружает каждое видео и пытается его сыграть...

    HTML:
    <video width="320" height="240" controls>
    <source src="01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="01.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="01.ogv" type='video/ogg; codecs="theora, vorbis"'>
    </video>
    Ну теперь вроде все:thx:

    P.S. Продолжение следует)

    P.P.S. Забыл сказать - для лучшего понимания статьи желательно прочитать про видео, ауди кодеки, MIME типы и про сами видео - контейнеры)))
     
    Последнее редактирование: 30 июн 2013
    30 июн 2013
    3 пользователям это понравилось.

Поделиться этой страницей

Загрузка...