将每个视频嵌入到webhost上的目录中

Posted 2021-05-07

这可能听起来很愚蠢......但有没有办法将目录中的所有视频嵌入到网页中？我正在我的网站上托管一些视频，但现在你必须手动浏览目录，只需点击视频链接即可。

我知道我可以将这些视频嵌入到html页面中，但是有什么办法可以让我在添加新视频时自动进行调整吗？

答案

如何执行此操作将取决于您如何构建服务器代码和网页代码，但下面的节点和角度示例完全符合您的要求：

// GET: route to return list of upload videos 
router.get('/video_list', function(req, res) {
    //Log the request details
    console.log(req.body);

    // Get the path for the uploaded_video directory 
    var _p;
    _p = path.resolve(__dirname, 'public', 'uploaded_videos');

    //Find all the files in the diectory and add to a JSON list to return
    var resp = [];
    fs.readdir(_p, function(err, list) {
        //Check if the list is undefined or empty first and if so just return 
        if ( typeof list == 'undefined' || !list ) {
            return;
        }
        for (var i = list.length - 1; i >= 0; i--) {

            // For each file in the directory add an id and filename to the response
            resp.push( 
                {"index": i,
                "file_name": list[i]}
            );
        }

        // Set the response to be sent
        res.json(resp);
    });
});

此代码在Web年份（即大约3年）中是旧的，因此节点处理路由等的方式现在可能不同，但概念保持不变，无论语言如何：

• 转到视频目录
• 获取其中的视频文件
• 将它们构建为JSON响应并将它们发送到浏览器
• 浏览器提取并显示列表

在这种情况下，对应于上述服务器代码的浏览器代码是：

$scope.videoList = [];

    // Get the video list from the Colab Server
    GetUploadedVideosFactory.getVideoList().then(function(data) {

        // Note: should really do some type checking etc here on the returned value
        console.dir(data.data);

        $scope.videoList = data.data;
    });

您可能会找到一种从目录自动生成网页索引的方法，但上面的方法类型可能会为您提供更多控制 - 例如，您可以非常轻松地排除某些文件名类型等。

完整的资源来源：https://github.com/mickod/ColabServer