Мультимедіа і Drag and Drop в HTML5
Використання мультимедійного HTML5, тегів video і audio. Основи додавання, перетягування функціональних web-сторінок з підтримкою перетягування API. Додавання на сторінку мультимедійних аудіо, відео елементів. Опанування крос-браузерного перетягування.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лабораторная работа |
| Язык | украинский |
| Дата добавления | 28.08.2017 |
| Размер файла | 561,9 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Лабораторна робота № 8
Мультимедіа і Drag and Drop в HTML5
Виконав ст. гр. ПНК-21: Христянович І.М.
Мета роботи: навчитися використовувати мультимедійні HTML5 теги <video> і <audio>. Опанувати основи додавання, перетягування функціональних web-сторінок з підтримкою перетягування API.
Завдання до лабораторної роботи:
1. Ознайомитися з Drag and Drop операціями та зробити крос-браузерне перетягування.
2. Додати на сторінку мультимедійні аудіо та відео елементи.
Хід роботи: мультимедійний аудіо перетягування відео
1. Ознайомився з Drag and Drop операціями та зробив крос-браузерне перетягування.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Lesson 6</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="base.css" rel="stylesheet" type="text/css" />
<script src="modernizr-2.0.js" type="text/javascript"></script>
<script type="text/javascript">
var shoppingcart, dragging, items = [];
function setup() {
shoppingcart = document.getElementById('shoppingcart');
shoppingcart.ondragenter = preventDefault;
shoppingcart.ondragover = preventDefault;
shoppingcart.ondrop = dragDrop;
}
function dragDrop(event) {
addToCart( dragging, 1 );
return preventDefault(event);
}
function dragStarted(event) {
dragging = event.target;
var dragImage = document.createElement('canvas');
var ctx = dragImage.getContext('2d');
ctx.drawImage(dragging, 0, 0);
ctx.font = 'bold 1.8em sans-serif';
ctx.fillText( '$5', 30, 100);
event.dataTransfer.setDragImage( dragImage, 0, 0);
}
function preventDefault(event) {
event.stopPropagation();
event.preventDefault();
return false;
}
function addToCart(item, quantity) {
if (items[item.src])
items[item.src] = parseInt(items[item.src]) + quantity;
else
items[item.src] = [quantity];
redrawCart();
}
function redrawCart() {
var quantity = 0;
for (var i in items)
quantity += parseInt(items[i]);
var html = '<h4>Shopping Cart (' + quantity + ')</h4>';
for (i in items)
html += '<img src="' + i + '" alt="Shopping Cart Item"/><h3>' + items[i] + '</h3>';
html += '<div><a href="#">Checkout</a></div>';
shoppingcart.innerHTML = html;
}
</script>
</head>
<body onload="setup()">
<div id="wrap">
<header id="masthead">
<img src="images/wa_logo.jpg" width="200" height="123" alt="Worldwide Apparel logo">
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="ourcompany.html">Our Company</a></li>
<li><a href="policies.html">Policies and Procedures</a></li>
<li><a href="doc_repository.html">Document Repository</a></li>
<li><a href="news.html">News & Events</a></li>
</ul>
</nav>
<div id="innerwrap">
<div id="shoppingcart"><h4>Shopping Cart</h4></div>
<section id="main">
<h1>Free tshirts</h1>
<p>To celebrate our IPO, for one day only, all employees are entitled to free t-shirts. Simply drag and drop the tshirts below into the shopping cart.</p>
<div class="tile_list" ondragstart="dragStarted(event);">
<div>
<img src="images/crewshirt.png" alt="Buy Tropical Kickback"/>
<h4>Plain Crew</h4>
</div>
<div>
<img src="images/rising_sun.png" alt="Buy Funky Orange"/>
<h4>Funky Orange</h4>
<
/div>
<br/>
</div>
</section>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<footer id="siteinfo">
<p>Copyright Worldwide Apparel 2011</p>
<p>All content on this site is confidential and should not be shared with anyone outside of Worldwide Apparel.</p>
</footer>
</div>
</body>
</html>
Додав на сторінку мультимедійні аудіо та відео елементи
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Video Lesson</title>
</head>
<body>
<video src='videos/BigBuck.mp4' controls poster='poster320.png' width='320' height='180'>
<source src='videos/BigBuck.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='videos/BigBuck.ogg' type='video/ogg; codecs="theora, vorbis"'>
</video>
<h4><a href="videos/BigBuck.mp4">Download the video</a></h4>
</body>
</html>
Висновок
На лабораторній роботі я навчився використовувати мультимедійні HTML5 теги <video> і <audio>. Опанував основи додавання, перетягування функціональних web-сторінок з підтримкою Drag and Drop API.
Размещено на Allbest.ru
...Подобные документы
История появления HTML5. Отличия HTML5 от предыдущих версий. Сравнительный анализ плюсов и минусов. Примеры российских сайтов на HTML5. Увеличение скорости работы. Технология Web Storage. Структурные возможности HTML5. Сравнение популярных браузеров.
курсовая работа [4,2 M], добавлен 23.10.2013Дослідження сутності технології Drag&Drop та особливостей її застосування. Властивості та події об'єктів Delphi, які використовуються при програмуванні технології Drag&Drop. Призначення обробників подій OnDragOver та OnDragDrop. Контекстна підказка.
лабораторная работа [14,4 K], добавлен 20.03.2011Кодування відео у Flash. Кодек Sorenson Spark. Параметри цифрового відео. Використання імпортованих кліпів. Профілі діалогового вікна Wizard. Редагування кліпу, що імпортується засобами Flash. Macromedia Flash Video. Групи елементів Track options.
контрольная работа [301,8 K], добавлен 28.06.2011История появления языка HTML5, список и краткое описание категорий его функциональных возможностей. Новые возможности этого стандарта, предназначенные для создания интерактивных веб-приложений с максимальным использованием мультимедийного контента.
курсовая работа [84,6 K], добавлен 17.02.2015HTML5 — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Создание web-приложения и использованием технологии Asp.net MVC 3 и языка web-разметки HTML5. Состав платформы MVC.
курсовая работа [1,2 M], добавлен 25.05.2012Використання технології SSI для автоматичного додавання на web-сторінку вмісту файлу, виведення значень змінних оточення, вбудовування результату виконання CGI-програм. Характеристика директив технології. Застосування до web-додатків даної технології.
реферат [22,3 K], добавлен 04.04.2015Формирование и структура, взаимосвязь основных элементов учебного сайта "HTML5&CSS3" для предоставления пользователям информации о новейших технологиях в web-индустрии и обучения практическим навыкам их применения. Разработка руководства пользователя.
курсовая работа [329,2 K], добавлен 17.06.2014Розробка та проектування інтерфейсу користувача у середовищі Microsoft Visual Studio 2010 з використання Visaul C#. Введення, додавання, вилучення даних. Пошук і фільтрація потрібних записів за допомогою запитів. Реалізація валідації, обробка виключень.
курсовая работа [1,5 M], добавлен 29.03.2017Аналіз параметрів та характеристик аудіо та відео кодеків. Аналіз параметрів протоколів сигналізації медіатрафіку та мережного рівня медіа систем. Вербальні моделі взаємодії відкритих систем. Математичні моделі процесів інкапсуляції та передачі даних.
курсовая работа [573,9 K], добавлен 22.03.2015Призначення та вимоги до функціональних характеристик при розробці мультимедійного посібника. Алгоритм побудови учбового курсу, установка загальних параметрів курсу, розробка практичних завдань та тестування, глосарія та довідки, опис інтерфейсу.
курсовая работа [2,8 M], добавлен 23.11.2010Сканер: призначення та принцип дії. Операційні оболонки. Шрифти та оформлення. Використання стилів. Форматування елементів діаграм. Послідовність команд запуску програми Калькулятор і операції додавання в ній. Аналіз продажу устаткування у магазинах.
контрольная работа [52,2 K], добавлен 03.10.2008Особливості форматів мультимедіа, історія їх створення. Одношарові та однобічні диски. Застосування синього лазера. Використання шейдерів при створенні спецефектів. Фрактал як результат виконання ітераційного циклу, самоподiбнiсть їх важлива властивість.
контрольная работа [2,3 M], добавлен 19.09.2009Проектування автоматизованої інформаційної системи обліку аудиторного фонду, яка має виконувати наступні функції: ініціалізацію; додавання і видалення елементів; переміщення по структурі даних; пошук елементів. Розробка інтерфейсу, інструкції користувача.
курсовая работа [1,0 M], добавлен 08.05.2012Структура клієнтської частини. Вибір елементів HTML4 і HTML5 для представлення контенту. Структурування інформаційного наповнення сайту. Забезпечення взаємодії серверної частини web-додатків з клієнтською. Програмування скриптів засобами JavaScript.
курсовая работа [3,3 M], добавлен 13.01.2014Поняття арифметико-логічного пристрою. Правила формування прямого, оберненого та додаткового коду двійкових чисел. Побудова електрично-принципової схеми модулю блоку керування, який міг би виконувати не тільки операцію додавання, але й віднімання.
курсовая работа [1,6 M], добавлен 27.02.2012Загальні відомості про системи числення. Поняття основи. Машинні коди чисел. Алгоритми виконання операцій додавання і віднімання в арифметико-логічному пристрої ЕОМ, множення і ділення двійкових чисел в АЛП. Логічні основи ЕОМ. Досконалі нормальні форми.
учебное пособие [355,4 K], добавлен 09.02.2012Подання чисел у нормальній формі. Порядок нормалізації чисел з рухомою комою. Правила додавання двійкових чисел з рухомою комою. Алгоритми і програми додавання чисел в арифметиці з рухомою комою в інструкціях навчального комп'ютера-симулятора DeComp.
лабораторная работа [31,7 K], добавлен 13.03.2011Індексація веб-ресурсів, проблема індексації динамічних веб-сторінок, мультимедійних та графічних елементів. "Прихований Інтернет" та вдосконалення методів пошуку, на основі лінгвістичних технологій. Технічні складнощі Web та класифікація його ресурсів.
реферат [22,2 K], добавлен 10.08.2011Мультимедіа як пристрої комп’ютера, призначені для роботи зі звуковою і відеоінформацією. Структура та функціональні особливості мультимедійних програмних засобів. Основні можливості програми з розробки презентацій. Класифікація та типи презентацій.
презентация [1,1 M], добавлен 17.03.2014Додавання (віднімання) чисел на ДСОК: двійкова система числення, представлення з рухомою комою, суматор оберненого коду. Побудова схеми керування заданого автомату, алгоритм додавання(віднімання) та його представлення у вигляді блок-схеми, кодування.
курсовая работа [616,7 K], добавлен 03.01.2014
