Технологии Microsoft для создания RIA-приложений

Видео в Web Matrix. Web Matrix и Silverlight

Разбить на страницы
Показывать лекцию целиком

Установка библиотеки ASP.NET Web Helpers

1.Создадим сайт на основе шаблона "Empty Site" и назовем его Video:

(рис 13.1)

2.Добавим в проект три файла: SilverlightVideo.cshtml, MediaPlayerVideo.cshtml, FlashVideo.cshtml и папку "media":

(рис 13.2)

3.Перейдем в рабочее пространство ( workspace ) "Сайт". И выберем "Администрирование веб-страниц ASP.NET":

(рис 13.3)

4.Откроется окно браузера, где необходимо ввести пароль (для каждого нового проекта эта операция будет проводиться повторно):

(рис 13.4)

После ввода пароля в браузере отобразиться (Окно браузера закрывать ненужно):

(рис 13.5)

5.Перейдем в WebMatrix далее рабочее пространство ( workspace ) "Файлы" и обновим содержание проекта. После обновления проекта появится папка App_Data с файлом "_Password.config":

(рис 13.6)

6.Переименуем "_Password.config" в "Password.config":

(рис 13.7)

7.Перейдем в окно браузера и перейдем по ссылке:

(рис 13.8)

8.После ввода пароля, в браузере отобразиться список доступных расширений:

(рис 13.9)

9.Выбираем в списке пакет ASP.NET Web Helpers (на момент написания курса актуальная версия 1.1) и жмем установить:

(рис 13.10)

После установки появится сообщение, что пакет успешно установлен:

(рис 13.11)

10.Добавим в папку "media",flash файл с расширением . swf, видеофайл с расширением . wmv, Silverlight файл с расширением . xap:

(рис 13.12)

Работа с Flash

1.Перейдем в файл FlashVideo.cshtml и заменим исходный код на:

<!DOCTYPE html>
<html>
<head>
    <title>Flash Video</title>
</head>
<body>
    @Video.Flash(path: "media/sample05.swf", 
                 width: "400", 
                 height: "600", 
                 play: true, 
                 loop: true, 
                 menu:  false, 
                 bgColor: "red",
                 quality: "medium",
                 scale: "noorder")
                 
</body>
</html>

Параметр quality отвечает за качество воспроизводимого ролика и может принимать следующие значения: low, autolow, autohigh, medium, high, best.

Параметр scale отвечает за масштабируемость ролика и может принимать следующие значения: showall, noorder, exactfit

2.Запустим приложение, в браузере отобразиться flash ролик:

(рис 13.13)

Работа с MediaPlayer

1.Перейдем в файл MediaPlayerVideo.cshtml и заменим исходный код на:

<!DOCTYPE html>
<html>
<head>
  <title>MediaPlayer Video</title>
</head>
<body>
    @Video.MediaPlayer(
        path: "media/Wildlife.wmv", 
        width: "600", 
        height: "600", 
        autoStart: true, 
        playCount: 2, 
        uiMode:  "full",
        mute: false,
        volume: 75)
</body>
</html>

Параметр playCount отвечает за число воспроизведений ролика. В нашем случае ролик автоматически проиграет два раза.

Параметр uiMode отвечает за пользовательский интерфейс плеера (громкость, кнопки воспроизведения и т.д) и может принимать значения: invisible, none, mini, full.

Параметр mute отвечает за воспроизведение звука в видео, если нам нужно воспроизводить видео без звука устанавливаем параметру значение true.

2.Запустим приложение, в браузере отобразиться ролик в WindowsMedia player:

(рис 13.14)

Работа с Silverlight

1.Перейдем в файл SilverlightVideo.cshtml и заменим исходный код на:

<!DOCTYPE html>
<html>
<head>
  <title>Silverlight Video</title>
</head>
<body>
      
<!DOCTYPE html>
<html>
<head>
  <title>Silverlight Video</title>
</head>
<body>
    @Video.Silverlight(
        path: "media/SilverlightApplication1.xap", 
        width: "400px", 
        height: "300px",    
        autoUpgrade: true)
</body>
</html>
</body>
</html>

SilverlightApplication1.xap это простой медиа-плеер реализованный в Visual Studio 2010 (Более подробно создание медиа-плеера рассмотрено в практическом занятии 14).

2.Запустим приложение, в браузере отобразится ролик в Silverlight –плеере:

(рис 13.15)
Страницы:

Установка библиотеки ASP.NET Web Helpers

1.Создадим сайт на основе шаблона "Empty Site" и назовем его Video:

(рис 13.1)

2.Добавим в проект три файла: SilverlightVideo.cshtml, MediaPlayerVideo.cshtml, FlashVideo.cshtml и папку "media":

(рис 13.2)

3.Перейдем в рабочее пространство ( workspace ) "Сайт". И выберем "Администрирование веб-страниц ASP.NET":

(рис 13.3)

4.Откроется окно браузера, где необходимо ввести пароль (для каждого нового проекта эта операция будет проводиться повторно):

(рис 13.4)

После ввода пароля в браузере отобразиться (Окно браузера закрывать ненужно):

(рис 13.5)

5.Перейдем в WebMatrix далее рабочее пространство ( workspace ) "Файлы" и обновим содержание проекта. После обновления проекта появится папка App_Data с файлом "_Password.config":

(рис 13.6)

6.Переименуем "_Password.config" в "Password.config":

(рис 13.7)

7.Перейдем в окно браузера и перейдем по ссылке:

(рис 13.8)

8.После ввода пароля, в браузере отобразиться список доступных расширений:

(рис 13.9)

9.Выбираем в списке пакет ASP.NET Web Helpers (на момент написания курса актуальная версия 1.1) и жмем установить:

(рис 13.10)

После установки появится сообщение, что пакет успешно установлен:

(рис 13.11)

10.Добавим в папку "media",flash файл с расширением . swf, видеофайл с расширением . wmv, Silverlight файл с расширением . xap:

(рис 13.12)

Работа с Flash

1.Перейдем в файл FlashVideo.cshtml и заменим исходный код на:

<!DOCTYPE html>
<html>
<head>
    <title>Flash Video</title>
</head>
<body>
    @Video.Flash(path: "media/sample05.swf", 
                 width: "400", 
                 height: "600", 
                 play: true, 
                 loop: true, 
                 menu:  false, 
                 bgColor: "red",
                 quality: "medium",
                 scale: "noorder")
                 
</body>
</html>

Параметр quality отвечает за качество воспроизводимого ролика и может принимать следующие значения: low, autolow, autohigh, medium, high, best.

Параметр scale отвечает за масштабируемость ролика и может принимать следующие значения: showall, noorder, exactfit

2.Запустим приложение, в браузере отобразиться flash ролик:

(рис 13.13)

Работа с MediaPlayer

1.Перейдем в файл MediaPlayerVideo.cshtml и заменим исходный код на:

<!DOCTYPE html>
<html>
<head>
  <title>MediaPlayer Video</title>
</head>
<body>
    @Video.MediaPlayer(
        path: "media/Wildlife.wmv", 
        width: "600", 
        height: "600", 
        autoStart: true, 
        playCount: 2, 
        uiMode:  "full",
        mute: false,
        volume: 75)
</body>
</html>

Параметр playCount отвечает за число воспроизведений ролика. В нашем случае ролик автоматически проиграет два раза.

Параметр uiMode отвечает за пользовательский интерфейс плеера (громкость, кнопки воспроизведения и т.д) и может принимать значения: invisible, none, mini, full.

Параметр mute отвечает за воспроизведение звука в видео, если нам нужно воспроизводить видео без звука устанавливаем параметру значение true.

2.Запустим приложение, в браузере отобразиться ролик в WindowsMedia player:

(рис 13.14)

Работа с Silverlight

1.Перейдем в файл SilverlightVideo.cshtml и заменим исходный код на:

<!DOCTYPE html>
<html>
<head>
  <title>Silverlight Video</title>
</head>
<body>
      
<!DOCTYPE html>
<html>
<head>
  <title>Silverlight Video</title>
</head>
<body>
    @Video.Silverlight(
        path: "media/SilverlightApplication1.xap", 
        width: "400px", 
        height: "300px",    
        autoUpgrade: true)
</body>
</html>
</body>
</html>

SilverlightApplication1.xap это простой медиа-плеер реализованный в Visual Studio 2010 (Более подробно создание медиа-плеера рассмотрено в практическом занятии 14).

2.Запустим приложение, в браузере отобразится ролик в Silverlight –плеере:

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