组件/媒体/媒体播放器

媒体播放器的概述

Telerik UI for ASP。NET MVC忍者图像

MediaPlayer是Telerik UI for ASP。NET MVC，一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

Telerik UI MediaPlayer HtmlHelper for ASP。NET MVCis a server-side wrapper for the Kendo UI MediaPlayer widget.

MediaPlayer播放来自静态源的视频文件或在线YouTube视频流，并在用户友好的界面中使用动态内容丰富您的网站。它通过使用HTML5提供了一个有风格的视频UI功能< >视频元素，为您的应用程序带来强大的媒体功能，而无需安装额外的插件。

为了响应切割端设计实践和趋势，MediaPlayer组件提供了响应式布局。这意味着它的大小取决于客户机(最终用户)设备和浏览器的功能。组件自动调整其区域的大小，以在提供的尺寸内以最合适的方式显示视频。MediaPlayer的响应式网页设计是开箱即用的，目的是在开发响应式应用程序时节省您的时间和精力。

下图演示了MediaPlayer的模板。

用户界面为ASP。NET MVCTemplate of the MediaPlayer

初始化MediaPlayer

视频文件准备好后，初始化MediaPlayer。它将呈现一个div元素作为其包装器容器。

下面的示例使用播放属性:

  • 因为移动方面的考虑在美国，iOS上的浏览器不能自动播放嵌入式媒体。这种限制可以防止用户在蜂窝网络上进行未经请求的下载。用户总是需要启动回放。有关更多信息，请参阅关于音频和视频HTML．
  • 由于iOS的限制，其他功能也可能受到限制。有关更多信息，请参见这篇文章以及网络上的其他可用资源。
@(Html.Kendo().MediaPlayer() .Name("mediaplayer") .AutoPlay(true) .Navigatable(true) .Media(m => m .Title("我们的公司文化-第一课").Source("Video/video1.mp4")) .HtmlAttributes(new {style = "height:360px;宽度:640px"}))

基本配置

下面的示例演示MediaPlayer的基本配置。

@(Html.Kendo(). mediaplayer (). autoplay (true) //在视频加载后立即开始播放。. navigatable (true) //启用键盘导航。. autorepeat (true) //循环播放视频。. forwardseek (false) //禁用正向搜索以确保观众将观看整个视频。.音量(20)//预设音量级别(0 - 100). . media (m => m //定义媒体文件-在本例中是一个YouTube视频. . title(“开始使用Telerik UI for ASP.”)NET MVC on Windows") . source ("https://www.youtube.com/watch?v=AIFNeWrZCdM")) . name ("mediaPlayer") //用于ID和在运行时引用它的小部件的名称。. htmattributes (new {style = "height:360px;宽度:640px"}))

功能和特性

事件

你可以订阅所有的MediaPlayer事件．有关基本MediaPlayer事件的完整示例，请参阅演示如何使用MediaPlayer的事件．

按处理人名称处理

下面的示例演示如何使用处理程序名称订阅事件。

@(Html.Kendo().MediaPlayer() .Name("mediaplayer") .AutoPlay(true) .Events(e => {e. pause ("playerPause");e.VolumeChange(“playerVolumeChange”);}) .Media(m => m .Title("Our Company Culture - Lesson 1") .Source("Video/video1.mp4")) .HtmlAttributes(new {style = "height:360px;