Html5中的video元素

最近在做门户的时候遇到要显示企业的视频介绍,需要找到一个在aspx页面播放视频的html,最后找到了是一段HTML5最新的html代码,如下:

/// <summary>
/// 播放视频的html5
/// </summary>
/// <param name="videoPath"></param>
/// <returns></returns>
private string PlayVideo(SPFolder videoFolder, string isAutoPlay)
{
string result = string.Empty; result = string.Format(@"
<div class='ms-webpart-chrome ms-webpart-chrome-vertical ' style='width: 350px;height:198px'>
<div class='ms-WPBody noindex ' id='WebPartctl00_ctl33_g_0eb8afcc_09fa_47a4_8493_d7517ccfddbd' style='width: 350px; height: 198px;' allowdelete='false' haspers='false' webpartid='0e199fb4-378d-483f-910b-f15ed4b22623' allowexport='false' allowremove='false' webpartid2='0eb8afcc-09fa-47a4-8493-d7517ccfddbd'>
<div class='mediaPlayerContainer' style='width: 100%; height: 100%;'>
<video width='350' height='198' id='ctl00_ctl33_g_0eb8afcc_09fa_47a4_8493_d7517ccfddbd' preload='none' controls=''
poster='{1}' data-mediatitle='{3}' {4} data-init='1'>
<source src='{0}' type='video/mp4' data-label='{3}'>
<object width='100%' height='100%' id='ctl00_ctl33_g_0eb8afcc_09fa_47a4_8493_d7517ccfddbd' data='data:application/x-silverlight-2,' type='application/x-silverlight-2'>
<param name='source' value='/_layouts/15/clientbin/mediaplayer.xap?rev=zuBbpwS4QIoVfmLpIUt3Og%3D%3D'>
<param name='enableHtmlAccess' value='true'>
<param name='windowless' value='true'>
<param name='background' value='#80808080'>
<param name='initParams' value='mediaTitle={3},mediaSource={0},previewImageSource={1},showEmbedControl=false,autoPlay=true,videoSetSource={2},startPlayBackAt=0'> <a style='text-decoration: none;' href='http://go.microsoft.com/fwlink/?LinkID=124807'><img style='' alt='Get Microsoft Silverlight' src='http://go.microsoft.com/fwlink/?LinkId=108181'></a><a title='Download Media' class='media-link' href='{0}'><span class='media-title'>Download Media</span></a>
</object>
</video>
<div class='mediaPlayerFullScreenEsc'><span>Press ESC to exit full-screen mode.</span></div>
<div class='mediaPlayerTitleOverlay'><span>{3}</span></div>
<div class='mediaPlayerInitialPlayButton' style='display: none;'><a title='Play' href='javascript:;'><span></span></a></div></div><input name='ctl00$ctl33$g_0eb8afcc_09fa_47a4_8493_d7517ccfddbd$HiddenInput' id='ctl00_ctl33_g_0eb8afcc_09fa_47a4_8493_d7517ccfddbd_HiddenInput' type='hidden'>
<div class='ms-clear'></div></div>
</div>", videoFolder.Files[].ServerRelativeUrl, "/sites/Ben/Style Library/Media Player/VideoPreview.png", videoFolder.ServerRelativeUrl, videoFolder.Files[].Name, isAutoPlay);
return result;
}

一般我们只要读取到Asset Library中的item项即可调用PlayVideo(item.Folder,””),即可播放视频,当然注意代码中站点的路径问题!而且前台我们还需要引用一段CSS,如下:

<link href="/_layouts/15/1033/styles/controls15.css?rev=kvFPx0lLkCPD61%2FeZTZBnA%3D%3D" rel="stylesheet" type="text/css">

这样视频就可以播放了,一般支持比较常见的格式。

大家都知道Html5,是正在推荐使用的html,目前可能有些浏览器还不能支持其包含的元素,以后作为统一的标准,会支持的越来越好!

希望对大家所有帮助!

上一篇:Ubuntu16.04下安装.NET Core


下一篇:java问卷