关键词:
想要在应用程序中实现多媒体播放功能,需要使用video控件,下面简单介绍下video控件的几个常用属性:
- height 属性,用于设置播放器的高度。
- wide 属性,用于设置播放器的宽度。
- controls 属性,用于设置播放器的控制栏是否显示。当该属性的值为true时,表示显示控制栏;值为false时隐藏控制栏。
- loop 属性,用来设置多媒体是否循环播放。当该属性值为true时,则会循环播放;值为false时只播放一次。
- src 属性,用于设置多媒体文件的URL。
<video class="videoStyle" id="videoId" controls="true" loop="true" src=""></video>
<button id="pickFileButton">打开</button>
为了控制界面元素的显示外观,在css文件夹里新建一个CSS样式文件,将其命名为StyleFile,并在其中添加如下代码,用于设置各元素的位置或样式。
接着在default.html文件的head元素内引用样式文件StyleFile.css,以便实现控制界面元素的显示外观,代码如下所示:
<link href="/css/StyleFile.css" rel="stylesheet" />
document.getElementById("pickFileButton").addEventListener("click", pickFile);
接下来在"app.onactivated = function (args) {......};"语句后面定义事件处理函数PickFile,实现文件的选取和视频播放功能,相关代码如下所示:
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
openPicker.fileTypeFilter.replaceAll([".mp4", ".wmv"]);
openPicker.pickSingleFileAsync().then(function (file) {
var localVideo = document.getElementById("videoId");
//为多媒体文件创建URL,并赋值给video控件的src属性
localVideo.src = URL.createObjectURL(file, { oneTimeOnly: true });
output.innerText = "成功打开了一个多媒体文件!";
output.innerText = "请选取一个多媒体文件!";
output.innerText = "错误:" + error.message;
win10系列:javascript图形
...canvas元素会在页面上生成一个矩形的位图画布,可以使用JavaScript在画布上实时绘制图形图像。在绘制图形时,需要先调用画布的getContext函数获取与该画布相关的用于绘制图形(如2D图形、3D图形)的对象,然后使用这个对象调用... 查看详情
win10系列:javascript动画4
上面介绍的动画效果是通过Windows动画库创建的,这里的旋转动画是通过设置页面元素的style对象的相关属性来创建,此动画的效果是将界面元素沿着指定的方向进行旋转。下面介绍style对象的几个常用属性。transitionProperty:获取... 查看详情
win10系列:javascript模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式。定义一个WinJS库模板的方法与定义WinJS库控件的方法相似:在页面中添加一个div元素,将di... 查看详情
win10系列:javascript动画2
"重新定位"动画也是Windows动画库中的动画效果。"重新定位"动画的动画效果是指一个或一组元素移动到新的位置时,这些元素不是突然出现在新的位置,而是从一个位置移动到另一个位置。创建"重新定位"动画可以使用WinJS.UI.Anima... 查看详情
win10系列:javascript写入和读取文件
正如上面的内容中所提到的,文件保存选取器用于保存文件,通过Windows.Storage.Pickers命名空间中的FileSavePicker类的pickSaveFileAsync函数可以向指定的文件系统位置中保存一个文件。文件保存之后,还可以对其进行读写操作,如果是向... 查看详情
win10系列:javascript控件的使用
...的基本控件,如按钮和复选框;WinJS库控件是为开发基于JavaScript的Windows应用商店应用提供的新控件,如ListView、HtmlControl和PageControl等。下面首先介绍如何添加这两种类型的控件,然后介绍如何为控件注册事件处理函数和设计控... 查看详情
win10系列:javascript综合实例2
在项目中添加一个名为pages的文件夹,并在pages文件夹里面再添加一个名为mainPage的文件夹,接着在mainPage文件夹里添加一个"页面控制"项,命名为mainPage,添加完成之后会同时生成mainPage.html、mainPage.css和mainPage.js这三个文件。这里... 查看详情
win10系列:javascript动画3
"交叉进出"动画也是Windows动画库中的动画效果。"交叉进出"动画的动画效果是在应用程序界面上隐藏一个元素并同时在相同位置显示另一个元素的时候,被隐藏的元素渐消失在应用程序界面上,而将要显示的元素渐显示在应用程... 查看详情
win10系列:javascript页面导航
页面导航是在开发应用的过程中使用频率较高的技术,其中比较常用的导航方式有多页导航和页内导航,采用多页导航方式的应用程序包含一系列的页面,在一个页面中加入另一个页面的链接地址后,单击链接将跳转到指定页面... 查看详情
win10系列:javascript综合实例4
实现主页面和分类页面的之后,最后来看一下菜肴页面的实现,这个页面用于详细介绍某项菜肴或主食,如名称、图片和具体做法等。在pages文件夹里面添加一个名为foodDetail的文件夹,并在foodDetail文件夹里添加一个"页面控制"项... 查看详情
win10系列:javascript综合实例1
上面几个小节讲解了使用HTML5和JavaScript语言开发Windows应用商店应用时会用到的一些技术,本小节将前面介绍的知识融合在一起创建一个菜谱应用程序,帮助读者更进一步地理解和掌握这些知识。此菜谱应用程序主要的功能是介... 查看详情
win10系列:javascript动画1
在应用程序中使用动画会使应用显得更加生动,进而给用户带来良好的视觉效果。例如,当用户将某个项添加到列表时,新项不会立即出现在列表中,而是采用动画形式到达相应位置,并且列表中的其他项也采用动画形式移动到... 查看详情
win10系列:javascript数据绑定
使用数据绑定可以使页面中元素的属性值与数据源中的数据同步,其中数据源可以来自数据库、文件以及自定义的数据等。在常用的数据绑定方法中,简单对象绑定是将HTML元素与一个仅包含数据的简单对象相绑定,模板绑定是... 查看详情
win10系列:javascript获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作。如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolders类的相应属性来实现,可用属性包括doc... 查看详情
win10系列:javascript访问文件和文件夹
...门基于C#语言的详细讲解,本节主要介绍如何使用HTML5和JavaScript开发具有文件操作功能的Windows应用商店应用,首先来了解一下用于对文件或文件夹进行操作的文件选取器。19.4.1文件选取器正如前面章节C#语言中所介绍的,文件选... 查看详情
win10共享及媒体流
韩梦飞沙 韩亚飞 [email protected] yue31313 han_meng_fei_sha 查看详情
如何设置win10做流媒体服务器
最专业、快捷的方式就是使用HoinWare流媒体直播软件,在Win10系统下5分钟即可搭建专业流媒体服务,支持直播、点播、录制功能。参考技术A这应该是使用了第三方优化软件无意禁用了“WindowsMediaPlayerNetworkSharingService”服务,才会... 查看详情
win10uwp开发系列:解决win10不同版本的style差异导致的兼容性问题
原文:Win10UWP开发系列:解决Win10不同版本的Style差异导致的兼容性问题最近在开发一个项目时,遇到了一个奇怪的问题,项目依赖的最低版本是10586,目标版本是14393,开发完毕发布到商店后,很多用户报无法正常加载页面。经查... 查看详情