方法创建的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.jsLeadtools.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 =函数() {//设置LicensevarlicenseUrl =”。/ 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对象。