方法创建的JavaScript应用程序VideoViewer
执行视频文件的回放。
概述 | |
---|---|
总结 | 本教程介绍如何在HTML5 JavaScript应用程序中播放视频文件。 |
完成时间 | 15分钟 |
Visual Studio项目 | 下载教程项目(1kb) |
平台 | JS Web应用程序 |
IDE | Visual Studio代码-客户端 |
开发许可 | 下载LEADTOOLS |
用另一种语言试试 |
|
JS的LEADTOOLS多媒体视频188宝金博怎么下载查看器控件包含许多高级功能,通过将不同来源的媒体(如文件和网络流)作为URI传递给播放器,简化了解码、处理和回放媒体。
在开始播放一个视频文件- HTML5 JavaScript教程,通过复习熟悉创建项目的基本步骤添加引用和设置许可证- HTML5 JavaScript教程。
本教程将使用http服务器
,用于运行静态文件服务器的控制台命令。安装http服务器
第一次安装node . js
然后安装http服务器
.
创建一个包含以下内容的项目文件夹:
index . html
文件app.js
文件自由
文件夹LEADTOOLS
文件夹所需的参考资料取决于项目的目的。本教程需要以下JS文件:
它们可以在这里找到:< INSTALL_DIR > \ LEADTOOLS21 \ Bin \ JS
Leadtools.js
Leadtools.188宝金博怎么下载Multimedia.js
请确保将两个文件复制到自由
文件夹中导入它们index . html
文件。
许可证解锁项目所需的特性。它必须在调用任何工具包函数之前设置。有关详细信息,包括不同平台的教程,请参阅设置运行时License.
有两种类型的运行时许可证:
请注意
中更详细地介绍了添加LEADTOOLS引用和设置许可证添加引用和设置许可证- HTML5 JavaScript教程。
打开项目的index . html
文件。添加下面的代码以导入LEADTOOLS依赖项、LEADTOOLS逻辑,并为VideoViewer
:
<! DOCTYPE html>
<html lang = "恩">
<头>
<meta charset="UTF-8" />
<标题>播放视频文件</标题>
<——导入LEADTOOLS依赖项——>
<script type="text/javascript" src="./lib/Leadtools.js"></脚本>
<script type="text/javascript" src="./lib/Leadtools.188宝金博怎么下载Multimedia.js"></脚本>
<——导入项目依赖项——>
<脚本类型="text/javascript" src="./app.js"></脚本>
<——为视频查看器容器配置样式——>
<风格>
.container {
身高:600 px;
宽度:600 px;
边框:4px纯黑色;
margin-top: 10 px;
}
</风格>
</头>
<身体>
<DIV带有从URI加载视频的按钮——>
<div>
<按钮id =“loadButton”>加载视频</按钮>
</ div>
<——DIV作为LEADTOOLS视频查看器的容器——>
<Div class="container" id="root">
</身体>
</ html>
打开你的app.js
文件。输入下面的代码来创建VideoViewer
然后播放一个例子MP4
文件使用它的URI:
窗口。onload =函数() {
//设置License
varlicenseUrl =”。/ LEADTOOLS / LEADTOOLS.lic.txt”;
vardeveloperKey =“REPLACE_WITH_KEY_CONTENTS”;
lt.RasterSupport。setLicenseUri (licenseUrl developerKey,函数(
setLicenseResult
) {
//查看license的状态
如果(setLicenseResult.result) {
console.log ("LEADTOOLS客户端许可证设置成功");
}其他的{
var味精="LEADTOOLS许可证丢失,无效或过期\nError:\n";
console.log(味精);
警报(味精);
}
});
//在根Div元素中创建一个视频查看器控件
这.videoViewer =新lt.188宝金博怎么下载Multimedia。VideoViewer({root: document.getElementById(“根”)});
//从URI样本中加载视频
. getelementbyid (“loadButton”).Onclick = () => {
这.videoViewer.setVideo (“http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4”);
}
};
打开命令行控制台,然后cd到项目的根目录。使用以下命令运行静态文件服务器:http服务器
服务器应该启动并运行http: localhost: 8080
.控制台中应该出现一条消息,指示服务器可用的所有端口。
打开浏览器,浏览到:http://localhost:8080/index.html
方法来播放视频文件VideoViewer
对象。