НОУ ИНТУИТ | Разработка гибридных приложений для мобильных устройств под Windows Phone. Лекция 2: Средства HTML5 для работы с текстом и мультимедиа

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

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

|

Вам нравится? Нравится 13 студентам

| Поделиться |

Поддержать программу

Аннотация: На этом занятии разрабатывается 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&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" позволит увидеть проигрыватель и услышать музыку: