开发者社区> 问答> 正文

视频剪辑websdk,大佬们有前端示例吗?

接入视频剪辑web sdk,界面有出来,但是没有加载数据,大佬们有前端示例吗?1.png
2.png
3.png
4.png

展开
收起
优优&辰辰 2023-12-30 11:39:47 42 0
1 条回答
写回答
取消 提交回答
  • 北京阿里云ACE会长

    问题似乎是关于如何在前端界面中展示

    基本的前端示例来展示这些数据

    请确保您已经在HTML文件中引入了相应的JavaScript库和样式表。然后,您可以使用以下代码来展示视频信息:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>视频剪辑Web SDK示例</title>
        <style>
            /* 添加一些基本的样式 */
            table {
                width: 100%;
                border-collapse: collapse;
            }
            th, td {
                border: 1px solid #ccc;
                padding: 8px;
                text-align: left;
            }
            th {
                background-color: #f2f2f2;
            }
        </style>
    </head>
    <body>
        <h1>视频剪辑Web SDK示例</h1>
        <table>
            <thead>
                <tr>
                    <th>参数名</th>
                    <th>参数值</th>
                </tr>
            </thead>
            <tbody id="videoDataTable">
            </tbody>
        </table>
        <script>
            // 假设您已经从Web SDK获取到了视频信息
            const videoData = {
                "fliveMaterials": null,
                "liveMaterials": [
                    {
                        "fileInfolist": [
                            {
                                "filelnfolist": [
                                    "https://1ch-5phj,oss-Cn-shanghai,aliyuncs,com/sp/ice-generated/a76bc870a16d71ee87f2f6f7d6496302/SnSotS/noma/549090e37C4e7986b25218aaeaec-00001.jpeg",
                                    "https://1ch-5phj,oss-Cn-shanghai,aliyuncs,com/sp/ice-generated/a76bc870a16d71ee87f2f6f7d6496302/SnSotS/noma/5494e3724e7986b25218ar-001.exr",
                                    "https://1ch-5phj,oss-Cn-shanghai,aliyuncs,com/sp/ice-generated/a76bc870a16d71ee87f2f6f7d6496302/SnSotS/noma/5494e3724e7986b25218ar-001.jpg"
                                ],
                                "mediabasicInfo": {
                                    "businessType": "general",
                                    "category": null,
                                    "coverURL": "https://1ch-5phj,oss-Cn-shanghai,aliyuncs,com/sp/ice-generated/a76bc870a16d71ee87f2f6f7d6496302/SnSotS/noma/5494e3724e7986b25218ar-001.jpg",
                                    "createTime": "2023-12-23T08:31:22Z",
                                    "deletedTime": null,
                                    "description": null,
                                    "inputURL": "https://1ch-5phj,oss-Cn-shanghai,aliyuncs,com/sp/仙女花备1: 1.m4",
                                    "mediaId": "a76bc870a16d71ee87f2f6f7d6496302",
                                    "mediaTags": null,
    
    2023-12-31 07:57:47
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
关联地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载