|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 27 | Длительность: 11:36:00
Специальности: Программист
Практическая работа 2:
Средства HTML5 для работы с текстом и мультимедиа
Аннотация: На этом занятии разрабатывается Cordova - проект под Windows Phone, использующий теги для работы с текстом, аудио- и видеороликами.
Ход выполнения работы:
- Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> MediaAndText.
- Используя обозреватель решений, откройте файл index.html из папки www созданного проекта:
Эта будет главная страница, которая будет связывать все остальные страницы. Очистим её и вставим следующий код разметки:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>ProjectMed</title> </head> <body> <div class="app"> <h1>Project Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> <menu> <li> <h1> <a href ="Audio.html">Audio</a> - ссылка на страницу Audio.html </h1> </li> <li> <h1> <a href="Text.html">Text</a> - ссылка на страницу Text.html </h1> </li> <li> <h1> <a href="Video.html">Video</a> - ссылка на страницу Video.html </h1> </li> </menu> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>Созданная главная страница содержит три гиперссылки на другие страницы Audio, Text и Video, которые пока отсутствуют.
Создание страницы Audio
- Для создания нового HTML-файла в обозревателе решений нажмите правой кнопкой мыши на папку www: Добавить -> Новый элемент. Выберите текстовый файл и назовите его Audio.html. Первоначально она будет пустой. Так как это станица будет содержать тег <audio>, для нее потребуется audio-файл. Добавим этот файл в нашу папку www. Содержание обозревателя решений:
- Вставьте в страницу Media.html следующий код разметки, содержащий тег <audio> и вложенные в него теги <source>:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Audio</title> </head> <body> <audio controls=""> <source src="../www/Daft.mp3" type="audio/mpeg"/> <source src="../www/Daft.ogg" type="audio/ogg"/> <em>Sorry, your browser doesn't support HTML5 audio.</em> </audio> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>В качестве ссылки на медиаобъект здесь выступает относительная ссылка, но можно использовать и абсолютную. Результатом выполнения будет главная страница с меню гиперссылок на другие страницы. Переход по ссылке "Audio" позволит увидеть проигрыватель и услышать музыку:
Дмитрий Белов