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[0].ServerRelativeUrl, "/sites/Ben/Style Library/Media Player/VideoPreview.png", videoFolder.ServerRelativeUrl, videoFolder.Files[0].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,目前可能有些浏览器还不能支持其包含的元素，以后作为统一的标准，会支持的越来越好！

希望对大家所有帮助！