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,目前可能有些浏览器还不能支持其包含的元素,以后作为统一的标准,会支持的越来越好!
希望对大家所有帮助!
Html5中的video元素的更多相关文章
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- 检测是否支持HTML5中的Video标签
//检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...
- 让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...
- html5中progress/meter元素
html5中progress/meter元素 一.总结 一句话总结: progress元素:用来建立一个进度条 meter元素的作用:用来建立一个度量条,用来表示度量衡的评定 <progress ...
- 第一章 用HTML5中的结构元素构建网站
1.当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section元素. 2.section是需要标题的,而nav或aside没有标题也是可以的. 3.html5轮廓工具 htt ...
- html5中新增的元素和废除的元素
一.新增的结构元素 1.section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标示文档结构. h5中的代码事 ...
- 详解HTML5中的<aside>元素与<article>元素
<aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...
- HTML5 中的Nav元素详解
什么是Nav元素 Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要 ...
- [Selenium] WebDriver 操作 HTML5 中的 video
测试播放,停止播放 http://www.videojs.com/ 示例: package com.learningselenium.html5; import static org.junit.As ...
随机推荐
- poj 2349 Arctic Network
http://poj.org/problem?id=2349 Arctic Network Time Limit: 2000MS Memory Limit: 65536K Total Submis ...
- IE中的文档兼容性
文档兼容性可定义 Internet Explorer 呈现网页的方式, 具体可以参考 https://msdn.microsoft.com/zh-cn/library/cc288325(v=vs.85 ...
- 转载C# 对象转Json序列化
转载原地址: http://www.cnblogs.com/plokmju/p/ObjectByJson.html JSON Json(JavaScript Object Notation) 是一种 ...
- python challenge第1关--NoteBook上的“乱码”
在 python challenge第0关中已经得到第1关的地址了: http://www.pythonchallenge.com/pc/def/map.html 一.观察地址栏和标签: What a ...
- SPOJ 375 (树链剖分 - 边权剖分 - 修改单边权)
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28982#problem/I 给你一棵有边权的树,有两个操作:一个操作是输出l到 ...
- VC中监测函数运行时间
VC++编程时,经常会监控某个算法的计算时间,以确定算法的效率.编码举例如下, //========start: algorithm time============= // SYSTEMTIME s ...
- 转移部分博客到CSDN之中
之前的文章一直发布在个人博客ivyxjc.xyz中, 现在将一部分博客移到csdn博客中.
- cocos2d-x 手电筒效果
转自:http://blog.csdn.net/xujiezhige/article/details/8448524# 常见的手电筒效果,可以通过CCRenderTexture来实现.主要是通过修改渲 ...
- 在Android Eclipse 开发如何 使用 (*.aar)文件
http://www.cnblogs.com/shortboy/p/4424944.html 开场白:其实这篇文章有点白费心机. 详细说明是:http://blog.csdn.net/qiujuer/ ...
- stm32上的Lava虚拟机开发进度汇报(2)
现在已经基本完成了Lava主要函数的编写,但还是有几个问题没解决: 1.实心圆和实心椭圆 2.FillArea 3.GetWord 其中FillArea如果没有很好的解决方法就算了,GetWord用g ...