Как Вставить Видео В Html Через Блокнот
DOCTYPE html > < html > <head> <meta charset="utf-8"> <title> video </title> </ head> <body> < video. И какие еще форматы можно вставлять в браузер? Разбираются два способа добавления видео на сайт с Вы здесь: Главная - HTML - HTML Основы - Как вставить видео на сайт. Предложенный IFRAME разместить на сайте ( HTML -режим при редактировании статьи). Как вставить несколько видео YouTube. Использование HTML5 для вставки видео на сайт. Тег <video> появился в HTML5, он позволяет добавлять и проигрывать видео на HTML -странице.
HTML -справочник и другие дополнительные материалы для ВидеоКурса здесь.
Как добавить видео YouTube на сайт. Предложенный IFRAME разместить на сайте (HTML-режим при редактировании статьи). Как вставить несколько видео YouTube. Для того, чтобы снизить время загрузки страницы, а форму просмотра сделать более эстетичной на место, где мы хотели бы видеть наше видео [для Blogger, при редактировании или написании сообщения, нужно перейти на вкладку "HTML"].
добавляем код. где xFa2_PVMeDQ — идентификатор ролика. Где его взять? Посмотрите на первый скриншот, он выделен синим цветом. И вот статья как сделать картинки-миниатюры на видео (они же превью) Ютуб. Что умеет скрипт. превью текущего видео делает затемнённым.
у превью просмотренного ролика появляется серая рамка благодаря this. style. backgroundColor='#555';. при большом количестве изображений будет возможность их прокручивать (как ещё можно сделать ). если не нужно, чтобы ролики начинались сразу после нажатия на превью, уберите &autoplay=1. ежели надо, чтобы ролик начался с определённого момента (как сделать ), то следует добавить в тег img data-start="32".
Вместо 32 поставить своё значение в секундах. коли хочется, чтобы видео воспроизводилось до какого-то момента, то необходимо внести data-end="60". Вместо 60 написать своё значение в секундах.
резиновый, растягивается на всю ширину, поэтому не нужно рассчитывать размеры отдельно для каждой области. если больше интересно вертикальное размещение изображений, то стиль может быть таким:. Несколько видео с текстом "серия 1". Внешний вид самый простецкий, его нужно изменить согласно дизайну сайта. серия 1 серия 2 серия 3.
HTML код ролика YouTube: расширенные возможности URL-адреса. Из предложенного кода следует взять идентификатор видеоролика, добавить его в форму ниже и настроить под свои нужды [см. допустимые параметры]. 78 комментариев:. Tigra Вы такая умная!спасибо вам за ваш блог! Я тему даже на блоге не могу настроить( может подскажите что не так?если есть свободная минутка.
NMitra Давайте посмотрим. Только профиль закрыт, поэтому я не вижу блога. Ал Каждый школьник знает о таком Al Kapone В видео похож на Майкла Корлеоне из фильма "Крестный отец" Mike K кстати немного потанцевал с бубном, чтобы видео могли смотреть и с Ios и других устройств, которые не поддерживают флеш, результат: Mike K (div id="containerYT"> (iframe width="560" height="315" src=" frameborder="0" allowfullscreen>(/iframe>(/div> (script type="text/javascript"> swfobject. embedSWF( ' 'containerYT', '425','344', '8',null,null, , );. function cargarVideo(id) var o = document.
getElementById( 'reproductorYT' ); if( o ) > (/script> Mikhail Спасибо, видео я установил, но оно нехорошо сливается с фоном, нельзя ли как нибудь рамочку приладить? NMitra Если путём скрипта описанного выше, то:. #reproductorYT -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 5px; border: 1px solid #555; >. Если посредством IFRAME из YouTube, то окружите его div, например.
<div class="youtube"><iframe width="560" height="315" src=" frameborder="0" allowfullscreen></iframe></div>. youtube text-align: center; padding: 1px; border: 1px solid #555; >. Или любой другой на ваше усмотрение. сергей. не работает переключение видео, в чем может быть причина? NMitra Вместо. и без строки <div id="containerYT">сообщение</div> не будет работать Анонимный Здравствуйте, Наташа.
Спасибо за урок. А нельзя ли в Вашей конструкции сделать так, чтобы при выборе видео, страница возвращалась бы к плейеру. Например, при большом списке роликов посетителю приходиться отматывать страницу до начала, чтобы просмотреть выбранный ролик. Спасибо. NMitra Думаю так:. <a href="javascript:cargarVideo('ID_N');" onClick="scrollTo(0,0); return false;"><img src=" /></a> Анонимный Здорово! Большое спасибо. А давайте ещё поусовершенствуем.
Как сделать так, чтобы ролик прокручивался с определенного момента и до определенного момента? Спасибо. NMitra По моему, это уже решается на стороне YouTube. Анонимный У-у-у-у-у-у-у! Жалко. Анонимный Думаю так:. (a href="javascript:cargarVideo('ID_N');" onClick="scrollTo(0,0); return false;"><img src=" /)</a) ---------------------------------------------------------------------.
Здравствуйте, Наташа. Проблемка, к плейеру то "отматывает", а вот выбранный ролик не загружается.
NMitra Вот это работает. <a href="#" onclick="cargarVideo('ID_N'); scrollTo(0,0); return false"> Анонимный Умничка! Спасибо.
Анонимный Здравствуйте, Наташа. Извените, что пишу не по теме, но уже весь инет перерыл и не нашел ничего подходящего. Подскажите возможность, как позиционировать новое окно заданных размеров (например форму регистрации) на странице в Opere? А если есть кросс-браузерная конструкция, то вообще классно.
Большое спасибо. NMitra Либо position: absolute;, либо position: relative.
Хотя вопроса не поняла: почему именно в Опере, относительно чего позиционировать? Анонимный Отписался на мыло, чтобы не засорять пост. Анонимный А скажите, пожалуйста, как сделать, чтобы вместе с видео загружалось с его описание с Ютуба, дата публикации и т. NMitra К сожалению, не могу сказать, обратитесь к разработчику скрипта. Анонимный Кто разработчик скрипта? NMitra В статье ссылка на пост. Игорь Скажите пожалуйста, а как можно выделить посещенные ролики в списке от непосещенных (например изменить цвет рамки), чтобы посетителю было проще ориентироваться. Всяко пробовал, чет не получается.
Спасибо. NMitra После скрипта замените код, например на такой:. <div class="videominiaturas"><img src=" onclick="cargarVideo('xFa2_PVMeDQ'); this. style. backgroundColor='#555'; return false"/><img src=" onclick="cargarVideo('hSrOpTYKNMw'); this. style.
backgroundColor='#555'; return false"/><img src=" onclick="cargarVideo('WFhzzJjRncI'); this. style. backgroundColor='#555'; return false"/></div>. this. style.
backgroundColor='#555' - меняет фон картинки. Mikhail Yutkin Вставлял код в страницу редактирования стандартного материала Joomla. Вставилось удачно, но не работает переключение ролликов под основным главным роликом.
т. как я понял я не сумел подключить script type="text/javascript" src=" script правильно. В html редакторе материала нету тега 'head' и если эту строку просто вставлять вначале кода, то она затирается и естественно скрипт не подхватится.
Подскажите, что делать? Если нужно вставить эту строчку в какой-то локальный файл, то в какой? Спасибо NMitra Есть более простой вариант без подключения библиотек. <iframe src=" allowfullscreen="" frameborder="0" id="video12"></iframe> <div style="text-align: center; margin-top: 2px;"> <a href="#" onclick="document. getElementById('video12'). src=' false;"><img src=" /></a> <a href="#" onclick="document. getElementById('video12').
src=' false;"><img src=" /></a> <a href="#" onclick="document. getElementById('video12'). src=' false;"><img src=" /></a></div>. Принцип тот же. Пример, Alex Zest А скрипт зачем подключается, -- достаточно вставить - то что считывается при клике правой мышей - под пунктом "Copy embed html" - или такой же записью на национальном языке --------------------- в случае ее отсутствия можно просто вставить ссылку через тег embed с указанием на исполняемый MIME-тип плэйеру NMitra О, я так с MIME-тип и не разобралась. Ссылку в студию с работающем примером.
))) Анонимный А для чего такая сложность если можно просто в страницу HTML вставить код например нужно только в начале открыть а в конце закрыть тег айфрэйм width="600" height="480" src=" frameborder="0" ссылку на видео замените на свою и всё вот пример NMitra Никакой сложности. Именно тот код, который вы написали и предлагает сам YouTube.
Но, когда видео несколько, то мне больше импонирует объединить их вышеприведённым способом. Анонимный Здравствуйте, Наташа. Скажите как вставить в видио с HTML кодом код своей странички чтоб после просмотра видио сразу открывалась регистрация NMitra Здравствуйте, можно таймер подключить. И, скажем, по прошествии 2 минут убирать IFRAME и добавлять форму регистрации. Анонимный а можно этот код переделать так чтоб выглядел как здесь. NMitra Я вас поняла, позже посмотрю. NMitra Сделала, см.
статью. Анонимный Подскажите пожалуйста, как это будет выглядеть, если нужно несколько таких списков на странице. Анонимный Здравствуйте.
Спасибо за урок. Подскажите, а как сделать так, чтобы вместо скринов ютуба, в маленьких окошках, можно было загрузить свои картинки. Как и что добавить? Спасибо. NMitra Анонимный №1. Чтобы прописать стиль один раз <div id="video12"> нужно заменить на <div id="video12" class="video12"> В стилях вместо #video12 применить.
video12. Тогда следующий блок будет <div id="video13" class="video12"> Затем <div id="video14" class="video12">. <script> var IMG = document.
querySelectorAll('[id^="video1"] span'); for (var i = 0; i < IMG. length; i++) IMG[i]. onclick = function() var IFRAME = this. parentNode. previousElementSibling; IFRAME. src = ' + this.
dataset. video + '?rel=0&autoplay=1'; if(this. dataset. end) IFRAME. src = IFRAME. src. replace(/([\s\S]*)/g, '$1&end=' + this.
dataset. end); if(this. dataset. start) IFRAME. src = IFRAME. src. replace(/([\s\S]*)/g, '$1&start=' + this.
dataset. start); this. style. backgroundColor='rgba(0,0,0. 2)'; > > </script> NMitra Здравствуйте, Анонимный №2 См. последний пример, только вместо "серия 1" пишите код своей картинки Женя Добрый день, подскажите пожалуйста как сделать так: есть ссылка простая (больше ничего не видно - iframe или div - display:none;) при нажатии на ссылку - появлялся бы блок с видео и автоматом начинал проигрываться. получается только спрятать бок и проявить его по нажатию.
но проблема в том, что он когда "none" все равно начинает проигрываться сам, хоть его и не видно. а если убрать autoplay то приходится после появления блока дополнительно тыкать на play ((( спасибо NMitra Добрый день, вариант 1 (см. для YouTube) вариант 2 Анонимный а как скачать ролик себе на комп ьютер. подскажи NMitra Попробуйте Анонимный Здраствуйте. Не подскажете почему при смене картинок ролика с 1.
jpg на любое другое (например 2. jpg) видео не загружается? NMitra Здравствуйте, изменить эту строку. var idIMG = this. src. replace(/http. img.
youtube. com. vi. ([\s\S]*?).
jpg/g, '$1'); Анонимный Но если у меня несколько видео и в каждом я хочу указать разную картинку. В одном первую в другом вторую. Как указать ето в переменной? NMitra Передавать id не через URL картинки, а через data-video="" как это сделано в примере с текстом ниже. И там и там скрипт один. Анонимный Огромное спасибо! Анонимный Доброго времени суток у меня такой вопрос как можно сделать ротатор своих видео с ютуба (своего канала )на свой сайт что бы при каждой загрузке (перезагрузке)одной и той же страницы в одном и том же месте показывалось ДРУГОЕ видео.
NMitra Здравствуйте, можно рандомом добавлять из списка выбранных вами видео. <script> var image=new Array(12); image[0]="xFa2_PVMeDQ"; image[1]="hSrOpTYKNMw"; image[2]="WFhzzJjRncI"; image[3]="JMJXvsCLu6s"; var alea=Math. round(Math.
random()*3); document. write('<iframe src=" + image[alea] + '?rel=0" allowfullscreen="" frameborder="0"></iframe>'); </script>. Наверняка есть более расширенный вариант, но нужно читать документацию. Можно ведь поиск по своему каналу сделать Unknown Спасибо, черт возьми :))). Кстати, сложно ли реализовать скрипт для просмотра фоток с видео, то есть при нажатии на миниатюру что бы показывалась фотка. NMitra Что-нибудь типа этого? Антон Благов Неееет, я запилил форму на сайт, которая позволяет выбирать видео, а можно ли переделать js так, что бы в iframe вставлялось и видео и простые фотки.
Антон Благов То есть в одной строке видео из ютуба и фото из сайта Антон Благов - вот ссылка на сайт, если нужно будет глянуть. Антон Благов Я пытался поправить js, но так и не добился чтоб в iframe вставлялись и изображения и видео с youtube по клику Антон Благов Единственный способ, который я придумал - это передавать на 2 наложеных друг на друга обертки ютубаи фота display:block и none, то есть при нажатии на маленькое окошко с фото, скрывать фрейм видео и наоборот, но это такой кастыль. NMitra Я всё равно не понимаю что нужно сделать: через iframe картинки тоже можно показывать (с высотой и длинной только нужно определиться):. <iframe src="//img.
youtube. com/vi/xFa2_PVMeDQ/mqdefault. jpg" allowfullscreen="" frameborder="0"></iframe>.
И зачем накладывать на iframe картинку: если человек щелкнул по миниатюре, то он планирует посмотреть следующее видео, а не картинку к нему. Скорость загрузки не станет выше, если ему сначала предлагать картинку на последующие видео. Только при загрузке всей страницы это важно. Антон Благов Смотрите, есть iframe, в который мы подпихиваем видео, которые выбираются в миниатюре, так вот, я хотел сделать так, что бы в миниатюрах были и фото и видео, то есть если мы кликаем по миниатюре Youtube - открывается видео, если мы кликаем по миниатюре с фоткой из сайта, то просто открывается фотка. NMitra А теперь понятно :) Разбейте (отделите) классами картинки от видео, например, так (по середине картинка): Антон Благов Разбил, сделал, вставил картинку со своего сайта, в итоге в iframe появилось вот что Антон Благов Можно ли через js, если класс - img, не слать в iframe ссылку на youtube. Антон Благов Допилил, если кому будет нужно - просто вставляете IFRAME.
style. backgroundImage = 'url(' + idIMG + ')'; предпоследней строчкой и в img с классом img можно пихать свои изображения. Антон Благов IFRAME. style. backgroundImage = 'url(' + idIMG + ')'; вместо IFRAME.
style. backgroundImage = 'url(//img.
youtube. com/vi/' + idIMG + '/0. jpg)'; NMitra Всё верно Антон Благов Огромное спасибо. Борис Добрый день! У меня такая проблема - очень понравился модуль с множественным видео в горизонтальном расположении,но никак не могу настроить его так, чтобы изображение было 60% по высоте и ширине и при этом располагалось по центру и отступ от маленьких превью не был огромен. попробовал сам и ничего не вышло. на бутсрапе битрикса он вообще при изменениях не хочет адаптироваться.
уезжает куда -то. Сможете помочь? NMitra Здравствуйте. #video12 position: relative; margin-bottom: 110px; padding-bottom: 60%; /* высота */ > #video12 iframe position: absolute; width: 60%;/* ширина */ height: 100%; left: 20%;/* по центу */ > Unknown на это var IMG = document. querySelectorAll('#video12 span'), IFRAME = document.
querySelector('#video12 iframe'); ругаются старые движки, например при интеграции ссылок на страницу с этим отображение в софт Фиксится так: 1 подключением JQuery 2 var IMG = $('#video12 img'), IFRAME =$('#myvframe'); 3 IFRAME. attr('src', '//www.
youtube. com/embed/' + idIMG + '?rel=0&autoplay=1'); NMitra Скоро не будут, у меня таких посетителей менее 1% :) Анонимный Как на странице реализовать вывод нескольких видео с разделами (каждый с вертикальным меню)? Используя два скрипта, изображения меню перового раздела выводятся во втором скрипте. NMitra Нужно использовать не ID, а CLASS. На следующей недели перепишу статью, чтоб было проще, без скрипта, только на HTML.
akula-z Насколько я понимаю, этот скрипт подходит только для добавляения видео с Ютую? То есть, добавить другой фрейм с видео (с иного источника), я не смогу? NMitra Следующей статьёй планирую дать код, который можно применить к любому IFRAME akula-z Ох,поскорей бы эта статья вышла. Извините, возможность оставить комментарий временно не доступна. На ранее оставленные я постараюсь ответить в ближайшее время.