Разработка гибридных приложений для мобильных устройств под Windows Phone

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

Показывать лекцию целиком

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

  • Запустите 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 doesnapos;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" позволит увидеть проигрыватель и услышать музыку:

    •

    Создание страницы Text

    Добавьте в папку www файл Text.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" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
      <title>Text</title>
    <style>
      h3 {font-family: Verdana, Arial, Helvetica, sans-serif;}
    </style>
    </head>

  <body>
    <h1>Это главный заголовок</h1>
    <h2>Это подзаголовок</h2> 
    <font color="#FFE4B5">
    <b> Стиль текста тела документа задает выравнивание по левому краю, цвет и шрифт.</b>
    </font>
    <em>Обратите внимание, что фон заголовков простирается вдоль всей ширины страницы.</em>
    <hr color="blue">Также отметим, что благодаря пробелу текст заголовка h2 
получает небольшой отступ и, таким образом, 
не выходит за пределы фона.</hr>
    <h3>Для заголовка h1 это не имеет значения, поскольку он выравнивается по центру.</h3>
  </body>
</html>

    Результатом выполнения будет отображение новой страницы с форматированным текстом:

    Создание страницы Video

    Добавьте в папку www файл Video.html.

    Так как в одном контейнере можно использовать несколько тегов <source>, то продемонстрируем работу с несколькими форматами, из которых браузер выбирает наиболее для него предпочтительный. Код разметки файла Video.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>Video(few br)</title>
    </head>
    <body>
      <video controls="" preload="auto">
        <source src="Simple.mp4"></source>
        </video>
      <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>

    Результатом выполнения будет страница, содержащая кнопку запуска видео-файла:

    При нажатии на кнопку запуска воспроизводится видео:

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^