Главная Коллекция "Otherreferats" Программирование, компьютеры и кибернетика Мультимедіа і Drag and Drop в HTML5

Мультимедіа і 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 от предыдущих версий. Сравнительный анализ плюсов и минусов. Примеры российских сайтов на HTML5. Увеличение скорости работы. Технология Web Storage. Структурные возможности HTML5. Сравнение популярных браузеров.

    курсовая работа [4,2 M], добавлен 23.10.2013

  • Створення проекту з використанням технології Drag&Drop та контекстних підказок

    Дослідження сутності технології Drag&Drop та особливостей її застосування. Властивості та події об'єктів Delphi, які використовуються при програмуванні технології Drag&Drop. Призначення обробників подій OnDragOver та OnDragDrop. Контекстна підказка.

    лабораторная работа [14,4 K], добавлен 20.03.2011

  • Імпорт відеозображень в редакторі Flash MX 2004

    Кодування відео у Flash. Кодек Sorenson Spark. Параметри цифрового відео. Використання імпортованих кліпів. Профілі діалогового вікна Wizard. Редагування кліпу, що імпортується засобами Flash. Macromedia Flash Video. Групи елементів Track options.

    контрольная работа [301,8 K], добавлен 28.06.2011

  • Отличия HTML5 от предыдущих версий

    История появления языка HTML5, список и краткое описание категорий его функциональных возможностей. Новые возможности этого стандарта, предназначенные для создания интерактивных веб-приложений с максимальным использованием мультимедийного контента.

    курсовая работа [84,6 K], добавлен 17.02.2015

  • Visual Studio 201о

    HTML5 — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Создание web-приложения и использованием технологии Asp.net MVC 3 и языка web-разметки HTML5. Состав платформы MVC.

    курсовая работа [1,2 M], добавлен 25.05.2012

  • Використання технології SSI для створення високодинамічних web-додатків

    Використання технології SSI для автоматичного додавання на web-сторінку вмісту файлу, виведення значень змінних оточення, вбудовування результату виконання CGI-програм. Характеристика директив технології. Застосування до web-додатків даної технології.

    реферат [22,3 K], добавлен 04.04.2015

  • Разработка и оформление электронного издания – учебного сайта "HTML5&CSS3"

    Формирование и структура, взаимосвязь основных элементов учебного сайта "HTML5&CSS3" для предоставления пользователям информации о новейших технологиях в web-индустрии и обучения практическим навыкам их применения. Разработка руководства пользователя.

    курсовая работа [329,2 K], добавлен 17.06.2014

  • Розробка інформаційної системи лабораторії цифрових пристроїв ТОВ "НАВІС-Україна"

    Розробка та проектування інтерфейсу користувача у середовищі Microsoft Visual Studio 2010 з використання Visaul C#. Введення, додавання, вилучення даних. Пошук і фільтрація потрібних записів за допомогою запитів. Реалізація валідації, обробка виключень.

    курсовая работа [1,5 M], добавлен 29.03.2017

  • Аналіз навантажень при передачі медіатрафіку в каналах взаємодіючих IP-систем

    Аналіз параметрів та характеристик аудіо та відео кодеків. Аналіз параметрів протоколів сигналізації медіатрафіку та мережного рівня медіа систем. Вербальні моделі взаємодії відкритих систем. Математичні моделі процесів інкапсуляції та передачі даних.

    курсовая работа [573,9 K], добавлен 22.03.2015

  • Проектування мультимедійних посібників в Macromedia

    Призначення та вимоги до функціональних характеристик при розробці мультимедійного посібника. Алгоритм побудови учбового курсу, установка загальних параметрів курсу, розробка практичних завдань та тестування, глосарія та довідки, опис інтерфейсу.

    курсовая работа [2,8 M], добавлен 23.11.2010

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.

© 2000 — 2025, ООО «Олбест» Все наилучшее для вас