Опубликован: 19.03.2014 | Уровень: для всех | Доступ: платный
Практическая работа 2:

Средства HTML5 для работы с текстом и мультимедиа

< Лекция 4 || Практическая работа 2: 12 || Лекция 5 >
Аннотация: На этом занятии разрабатывается Cordova - проект под Windows Phone, использующий теги для работы с текстом, аудио- и видеороликами.
Ключевые слова: файл, отображение, браузер

Ход выполнения работы:

  1. Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> MediaAndText.
  2. Используя обозреватель решений, откройте файл 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

  1. Для создания нового HTML-файла в обозревателе решений нажмите правой кнопкой мыши на папку www: Добавить -> Новый элемент. Выберите текстовый файл и назовите его Audio.html. Первоначально она будет пустой. Так как это станица будет содержать тег <audio>, для нее потребуется audio-файл. Добавим этот файл в нашу папку www. Содержание обозревателя решений:
  2. Вставьте в страницу 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&apos;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" позволит увидеть проигрыватель и услышать музыку:

< Лекция 4 || Практическая работа 2: 12 || Лекция 5 >
Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?

Акмарал Кубыгулова
Акмарал Кубыгулова
Казахстан, Астана
Илья Макаров
Илья Макаров
Россия, Пермь, МОУ СОШ 71, 2013