ASP.NET Web Sayfaları (Razor) Sitesinde Video Görüntüleme

Makale
07/13/2023

Bu makalede, kullanıcıların sitede depolanan videoları görüntülemesine izin vermek için ASP.NET Web Sayfaları (Razor) web sitesinde video (medya) oynatıcının nasıl kullanılacağı açıklanmaktadır. Razor söz dizimi içeren ASP.NET Web Sayfaları Flash (.swf), Media Player (.wmv) ve Silverlight (.xap) videolarını oynatmanızı sağlar.

Öğrenecekleriniz:

Video oynatıcı seçme.

Web sayfasına video ekleme.

Video oynatıcı özniteliklerini ayarlama.

Makalede tanıtılan ASP.NET Razor sayfaları özellikleri şunlardır:

Yardımcı Video .

Öğreticide kullanılan yazılım sürümleri

ASP.NET Web Sayfaları (Razor) 2

WebMatrix 2

Bu öğretici, WebMatrix 3 ile de çalışır.

Giriş

Sitenizde bir video görüntülemek isteyebilirsiniz. Bunu yapma yollarından biri, YouTube gibi videoyu içeren bir siteye bağlantı vermektir. Bu sitelerden bir videoyu doğrudan kendi sayfalarınıza eklemek istiyorsanız, genellikle siteden HTML işaretlemesi alabilir ve bunu sayfanıza kopyalayabilirsiniz. Örneğin, aşağıdaki örnekte YouTube videosunu ekleme gösterilmektedir:

<!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>

Kendi web sitenizde (genel bir video paylaşım sitesinde değil) bulunan bir videoyu oynatmak istiyorsanız, bunun gibi ekli işaretlemeyi kullanarak videoya doğrudan bağlanamazsınız. Ancak, bir medya oynatıcıyı doğrudan sayfada işleyen yardımcıyı Video kullanarak sitenizden video oynatabilirsiniz.

Video Oynatıcı Seçme

Video dosyaları için birçok biçim vardır ve her biçim genellikle farklı bir oynatıcı ve oynatıcıyı yapılandırmak için farklı bir yol gerektirir. ASP.NET Razor sayfalarında, yardımcıyı Video kullanarak bir web sayfasında video oynatabilirsiniz. Yardımcı, Video normalde sayfaya video eklemek için kullanılan ve embed HTML öğelerini otomatik olarak oluşturduğundanobject, web sayfasına video ekleme işlemini basitleştirir.

Yardımcı Video aşağıdaki medya oynatıcıları destekler:

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

The Flash Player

Yardımcının FlashVideo oynatıcısı, bir web sayfasında Flash videoları (.swf dosyaları) oynatmanıza izin verir. En azından video dosyasının yolunu sağlamanız gerekir. Yol dışında hiçbir şey belirtmezseniz, oyuncu flash'ın geçerli sürümü tarafından ayarlanan varsayılan değerleri kullanır. Tipik varsayılan ayarlar şunlardır:

Video, varsayılan genişliği ve yüksekliği kullanılarak ve arka plan rengi olmadan görüntülenir.
Sayfa yüklendiğinde video otomatik olarak yürütülür.
Video, açıkça durdurulana kadar sürekli döngüye alır.
Video, belirli bir boyuta uyacak şekilde kırpmak yerine tüm videoyu gösterecek şekilde ölçeklendirilir.
Video bir pencerede yürütülür.

MediaPlayer Oynatıcısı

Yardımcının MediaPlayerVideo oynatıcısı bir web sayfasında Windows Media videoları (.wmv dosyaları), Windows Media ses (.wma dosyaları) ve MP3 (.mp3 dosyaları) oynatmanıza olanak tanır. Yürütülecek medya dosyasının yolunu eklemeniz gerekir; diğer tüm parametreler isteğe bağlıdır. Yalnızca bir yol belirtirseniz, oynatıcı MediaPlayer'ın geçerli sürümü tarafından ayarlanan varsayılan ayarları kullanır, örneğin:

Video, varsayılan genişliği ve yüksekliği kullanılarak görüntülenir.
Sayfa yüklendiğinde video otomatik olarak yürütülür.
Video bir kez oynatılır (döngü yapmaz).
Oynatıcı, kullanıcı arabiriminde tam denetim kümesini görüntüler.
Video bir pencerede yürütülür.

The Silverlight Player

Yardımcının SilverlightVideo oynatıcısı, Windows Media Video (.wmv dosyaları), Windows Media Audio (.wma dosyaları) ve MP3 (.mp3 dosyaları) yürütmenize olanak tanır. Path parametresini Silverlight tabanlı bir uygulama paketine (.xap dosyası) işaret edecek şekilde ayarlamanız gerekir. Genişlik ve yükseklik parametrelerini de ayarlamanız gerekir. Diğer tüm parametreler isteğe bağlıdır. Video için Silverlight oynatıcısını kullandığınızda, yalnızca gerekli parametreleri ayarlarsanız, Silverlight oynatıcı videoyu arka plan rengi olmadan görüntüler.

Not

Silverlight'ı henüz bilmiyorsanız: .xap dosyası bir .xaml dosyasındaki düzen yönergelerini, derlemelerde yönetilen kodu ve isteğe bağlı kaynakları içeren sıkıştırılmış bir dosyadır. Visual Studio'da Silverlight uygulama projesi olarak bir .xap dosyası oluşturabilirsiniz.

Video oynatıcı, Silverlight hem oynatıcı için sağladığınız ayarları hem de .xap dosyasında sağlanan ayarları kullanır.

İpucu

MIME Türleri

Tarayıcı bir dosyayı indirdiğinde, tarayıcı dosya türünün işlenen belge için belirtilen MIME türüyle eşleştiğinden emin olur. MIME türü, bir dosyanın içerik türü veya medya türüdür. Yardımcı Video aşağıdaki MIME türlerini kullanır:

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

Flash (.swf) Videoları Yürütme

Bu yordam, sample.swf adlı bir Flash videosunu nasıl oynatabileceğinizi gösterir. Yordam, sitenizde Media adlı bir klasör olduğunu ve .swf dosyasının bu klasörde olduğunu varsayar.

ASP.NET Web Yardımcıları Kitaplığı'nı, henüz eklemediyseniz , ASP.NET Web Sayfaları Sitesine Yardımcı Yükleme bölümünde açıklandığı gibi web sitenize ekleyin.
Web sitesine bir sayfa ekleyin ve FlashVideo.cshtml olarak adlandırın.

Sayfaya aşağıdaki işaretlemeyi ekleyin:

<!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>

Sayfayı tarayıcıda çalıştırın. (Sayfayı çalıştırmadan önce Dosyalar çalışma alanında seçili olduğundan emin olun.) Sayfa görüntülenir ve video otomatik olarak oynatılır.

Flash video lowparametresini quality , , autolow, autohigh, mediumve highbestolarak ayarlayabilirsiniz:

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

Parametreyi kullanarak Flash videosunu scale belirli bir boyutta oynatacak şekilde değiştirebilirsiniz ve bunu aşağıdakine ayarlayabilirsiniz:

showall. Bu, orijinal en boy oranını korurken videonun tamamını görünür hale getirir. Ancak, her iki tarafta da kenarlıklar olabilir.
noorder. Bu, orijinal en boy oranını korurken videoyu ölçeklendirir, ancak kırpılmış olabilir.
exactfit. Bu, orijinal en boy oranını korumadan videonun tamamını görünür hale getirir, ancak bozulma oluşabilir.

Parametre scale belirtmezseniz videonun tamamı görünür ve özgün en boy oranı kırpma olmadan korunur. Aşağıdaki örnekte parametresinin nasıl kullanılacağı gösterilmektedir scale :

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

Flash player adlı windowModebir video modu ayarını destekler. Bunu , opaqueve transparentolarak windowayarlayabilirsiniz. Varsayılan olarak, windowMode olarak ayarlanır windowve bu ayar videoyu web sayfasında ayrı bir pencerede görüntüler. Ayar, opaque web sayfasındaki videonun arkasındaki her şeyi gizler. Ayar transparent , videonun herhangi bir bölümünün saydam olduğu varsayılarak web sayfasının arka planının videoda gösterilmesini sağlar.

MediaPlayer (.wmv) Videoları Yürütme

Aşağıdaki yordamda, Media klasöründeki sample.wmv adlı bir Window Media videosunu nasıl oynatabileceğiniz gösterilmektedir.

Henüz yapmadıysanız, ASP.NET Web Sayfaları Sitesine Yardımcı Yükleme bölümünde açıklandığı gibi web sitenize ASP.NET Web Yardımcıları Kitaplığı'nı ekleyin.
MediaPlayerVideo.cshtml adlı yeni bir sayfa oluşturun.

Sayfaya aşağıdaki işaretlemeyi ekleyin:

<!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>

Sayfayı tarayıcıda çalıştırın. Video otomatik olarak yüklenir ve yürütülür.

Videonun otomatik olarak kaç kez oynatıldığını gösteren bir tamsayıya ayarlayabilirsiniz playCount :

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

parametresi, uiMode kullanıcı arabiriminde hangi denetimlerin gösterileceğini belirtmenize olanak tanır. , , noneminiveya fullolarak invisibleayarlayabilirsinizuiMode. Parametre uiMode belirtmezseniz video, video penceresine ek olarak durum penceresi, arama çubuğu, denetim düğmeleri ve ses düzeyi denetimleriyle birlikte görüntülenir. Ses dosyasını oynatmak için oynatıcıyı kullanırsanız bu denetimler de görüntülenir. Aşağıda parametresinin nasıl kullanılacağına ilişkin bir örnek verilmişti uiMode :

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

Varsayılan olarak, video oynatıldığında ses açıktır. Parametresini true olarak ayarlayarak mute sesin sesini kapatabilirsiniz:

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

Parametresini 0 ile 100 arasında bir değere ayarlayarak MediaPlayer videosunun volume ses düzeyini denetleyebilirsiniz. Varsayılan değer 50’dir. Aşağıda bir örnek verilmiştir:

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

Silverlight Videolarını Oynatma

Bu yordam, Media adlı bir klasörde yer alan Silverlight .xap sayfasında bulunan videoların nasıl oynatıldığını gösterir.

Henüz yapmadıysanız, web sitenize ASP.NET Web Yardımcıları Kitaplığı'nı ASP.NET Web Sayfaları Sitesine Yardımcı Yükleme bölümünde açıklandığı gibi ekleyin.
SilverlightVideo.cshtml adlı yeni bir sayfa oluşturun.

Sayfaya aşağıdaki işaretlemeyi ekleyin:

<!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>