Menampilkan Video di Situs Halaman Web (Razor) ASP.NET

2023-07-13

Artikel ini menjelaskan cara menggunakan pemutar video (media) di situs web ASP.NET Web Pages (Razor) untuk memungkinkan pengguna melihat video yang disimpan di situs. ASP.NET Web Pages dengan sintaks Razor memungkinkan Anda memutar video Flash (.swf), Media Player (.wmv), dan Silverlight (.xap).

Yang akan Anda pelajari:

Cara memilih pemutar video.

Cara menambahkan video ke halaman web.

Cara mengatur atribut pemutar video.

Ini adalah fitur halaman ASP.NET Razor yang diperkenalkan dalam artikel:

Pembantunya Video .

Versi perangkat lunak yang digunakan dalam tutorial

Halaman Web ASP.NET (Razor) 2

WebMatrix 2

Tutorial ini juga berfungsi dengan WebMatrix 3.

Pengantar

Anda mungkin ingin menampilkan video di situs Anda. Salah satu cara untuk melakukannya adalah dengan menautkan ke situs yang sudah memiliki video, seperti YouTube. Jika Anda ingin menyematkan video dari situs-situs ini langsung di halaman Anda sendiri, Anda biasanya bisa mendapatkan markup HTML dari situs lalu menyalinnya ke halaman Anda. Misalnya, contoh berikut menunjukkan cara menyematkan video YouTube:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Embedded Video Example</title>
    </head>
    <body>
        <h1>Embedded Video Example</h1>
        <p>The following video provides an introduction to WebMatrix:</p>
        <iframe width="560" 
                height="315" 
                src="http://www.youtube.com/embed/fxCEcPxUbYA" 
                frameborder="0" 
                allowfullscreen></iframe>
</body>
</html>

Jika Anda ingin memutar video yang ada di situs web Anda sendiri (bukan di situs berbagi video publik), Anda tidak dapat langsung menautkannya menggunakan markup yang disematkan seperti ini. Namun, Anda dapat memutar video dari situs Anda dengan menggunakan pembantu Video , yang merender pemutar media langsung di halaman.

Memilih Pemutar Video

Ada banyak format untuk file video, dan setiap format biasanya memerlukan pemutar yang berbeda dan cara yang berbeda untuk mengonfigurasi pemutar. Di halaman ASP.NET Razor, Anda dapat memutar video di halaman web menggunakan pembantu Video . Pembantu Video menyederhanakan proses penyematan video di halaman web karena secara otomatis menghasilkan object elemen HTML dan embed yang biasanya digunakan untuk menambahkan video ke halaman.

Pembantu Video mendukung pemutar media berikut:

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

Pemutar Flash

Pemutar Flash pembantu Video memungkinkan Anda memutar video Flash (file.swf ) di halaman web. Minimal, Anda harus menyediakan jalur ke file video. Jika Anda tidak menentukan apa pun kecuali jalur, pemutar menggunakan nilai default yang diatur oleh versi Flash saat ini. Pengaturan default umumnya adalah:

Video ditampilkan menggunakan lebar dan tinggi defaultnya dan tanpa warna latar belakang.
Video diputar secara otomatis saat halaman dimuat.
Video terus berulang hingga video dihentikan secara eksplisit.
Video diskalakan untuk menampilkan semua video, daripada memangkas video agar sesuai dengan ukuran tertentu.
Video diputar di jendela.

Pemutar MediaPlayer

Pemutar MediaPlayer pembantu Video memungkinkan Anda memutar video Windows Media (file.wmv ), audio Windows Media (file.wma ), dan MP3 ( file.mp3 ) di halaman web. Anda harus menyertakan jalur berkas media untuk diputar; semua parameter lainnya bersifat opsional. Jika Anda hanya menentukan jalur, pemutar menggunakan pengaturan default yang diatur oleh versi MediaPlayer saat ini, seperti:

Video ditampilkan menggunakan lebar dan tinggi defaultnya.
Video diputar secara otomatis saat halaman dimuat.
Video diputar sekali (tidak berulang).
Pemutar menampilkan set kontrol lengkap di antarmuka pengguna.
Video diputar di jendela.

Pemutar Silverlight

Pemutar Silverlight pembantu Video memungkinkan Anda memutar Windows Media Video (file .wmv ), Windows Media Audio (file.wma ), dan MP3 ( file.mp3 ). Anda harus mengatur parameter jalur untuk menunjuk ke paket aplikasi berbasis Silverlight (file.xap ). Anda juga harus mengatur parameter lebar dan tinggi. Semua parameter bersifat opsional. Saat Anda menggunakan pemutar Silverlight untuk video, jika Anda hanya mengatur parameter yang diperlukan, pemutar Silverlight menampilkan video tanpa warna latar belakang.

Catatan

Jika Anda belum mengetahui Silverlight: file .xap adalah file terkompresi yang berisi instruksi tata letak dalam file .xaml , kode terkelola dalam rakitan, dan sumber daya opsional. Anda dapat membuat file .xap di Visual Studio sebagai proyek aplikasi Silverlight.

Pemutar Silverlight video menggunakan pengaturan yang Anda sediakan untuk pemutar dan pengaturan yang disediakan dalam file .xap .

Tip

Jenis MIME

Saat browser mengunduh file, browser memastikan bahwa jenis file cocok dengan jenis MIME yang ditentukan untuk dokumen yang sedang dirender. Jenis MIME adalah tipe isi atau tipe media file. Pembantu Video menggunakan jenis MIME berikut:

application/x-shockwave-flash
application/x-mplayer2
application/x-silverlight-2

Memutar Video Flash (.swf)

Prosedur ini menunjukkan kepada Anda cara memutar video Flash bernama sample.swf. Prosedur ini mengasumsikan bahwa Anda memiliki folder bernama Media di situs Anda dan bahwa file .swf ada di folder tersebut.

Tambahkan Pustaka Pembantu Web ASP.NET ke situs web Anda seperti yang dijelaskan dalam Menginstal Pembantu di Situs Halaman Web ASP.NET, jika Anda belum menambahkannya.
Di situs web, tambahkan halaman dan beri nama FlashVideo.cshtml.

Tambahkan markup berikut ke halaman:

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

Jalankan halaman di browser. (Pastikan halaman dipilih di ruang kerja File sebelum Anda menjalankannya.) Halaman ditampilkan dan video diputar secara otomatis.

Anda dapat mengatur quality parameter untuk video Flash ke low, , autolow, autohighmedium, high, dan best:

<!-- Set the Flash video quality -->
@Video.Flash(path: "Media/sample.swf", quality: "autohigh")

Anda dapat mengubah video Flash untuk diputar pada ukuran tertentu menggunakan scale parameter , yang dapat Anda atur ke yang berikut:

showall. Hal ini membuat seluruh video terlihat sambil mempertahankan rasio aspek asli. Namun, Anda mungkin berakhir dengan batas di setiap sisi.
noorder. Ini menskalakan video sambil mempertahankan rasio aspek asli, tetapi mungkin dipangkas.
exactfit. Ini membuat seluruh video terlihat tanpa mempertahankan rasio aspek asli, tetapi distorsi dapat terjadi.

Jika Anda tidak menentukan scale parameter, seluruh video akan terlihat dan rasio aspek asli akan dipertahankan tanpa pemotongan apa pun. Contoh berikut menunjukkan cara menggunakan scale parameter :

<!-- Set the Flash video to an exact size -->
@Video.Flash(path: "Media/sample.swf", width: "1000", height: "100",
    scale: "exactfit")

Pemutar Flash mendukung pengaturan mode video bernama windowMode. Anda dapat mengatur ini ke window, opaque, dan transparent. Secara default, windowMode diatur ke window, yang menampilkan video di jendela terpisah di halaman web. Pengaturan opaque menyembunyikan semua yang ada di belakang video di halaman web. transparent Pengaturan memungkinkan latar belakang halaman web ditampilkan melalui video, dengan asumsi bagian mana pun dari video transparan.

Memutar Video MediaPlayer (.wmv)

Prosedur berikut ini memperlihatkan kepada Anda cara memutar video Media Jendela bernama sample.wmv yang ada di folder Media .

Tambahkan Pustaka Pembantu Web ASP.NET ke situs web Anda seperti yang dijelaskan dalam Menginstal Pembantu di Situs Halaman Web ASP.NET, jika Anda belum melakukannya.
Buat halaman baru bernama MediaPlayerVideo.cshtml.

Tambahkan markup berikut ke halaman:

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

Jalankan halaman di browser. Video dimuat dan diputar secara otomatis.

Anda dapat mengatur playCount ke bilangan bulat yang menunjukkan berapa kali memutar video secara otomatis:

<!-- Set the MediaPlayer video playCount -->
@Video.MediaPlayer(path: "Media/sample.wmv", playCount: 2)

Parameter uiMode memungkinkan Anda menentukan kontrol mana yang muncul di antarmuka pengguna. Anda dapat mengatur uiMode ke invisible, none, mini, atau full. Jika Anda tidak menentukan uiMode parameter, video akan ditampilkan dengan jendela status, bilah pencarian, tombol kontrol, dan kontrol volume selain jendela video. Kontrol ini juga akan ditampilkan jika Anda menggunakan pemutar untuk memutar file audio. Berikut adalah contoh cara menggunakan uiMode parameter :

<!-- Set the MediaPlayer control UI -->
@Video.MediaPlayer(path: "Media/sample.wmv", uiMode: "mini")

Secara default, audio aktif saat video diputar. Anda dapat membisukan audio dengan mengatur parameter ke mute true:

<!-- Play the MediaPlayer video without audio -->
@Video.MediaPlayer(path: "Media/sample.wmv", mute: true)

Anda dapat mengontrol tingkat audio video MediaPlayer dengan mengatur volume parameter ke nilai antara 0 dan 100. Nilai defaultnya adalah 50. Berikut contohnya:

<!-- Play the MediaPlayer video without audio -->
@Video.MediaPlayer(path: "Media/sample.wmv", volume: 75)

Memutar Video Silverlight

Prosedur ini memperlihatkan kepada Anda cara memutar video yang terkandung dalam halaman Silverlight .xap yang ada di folder bernama Media.

Tambahkan Pustaka Pembantu Web ASP.NET ke situs web Anda seperti yang dijelaskan dalam Menginstal Pembantu di Situs Halaman Web ASP.NET, jika Anda belum melakukannya.
Buat halaman baru bernama SilverlightVideo.cshtml.

Tambahkan markup berikut ke halaman:

<!DOCTYPE html>
<html>
<head>
  <title>Silverlight Video</title>
</head>
<body>
    @Video.Silverlight(
        path: "Media/sample.xap",
        width: "400",
        height: "600",
        bgColor: "red",
        autoUpgrade: true)
</body>
</html>