Question

我需要从其他网站加载多种类型的视频源，然后将文本链接返回到视频中。

例如我打开：

http://www.getthisvideoexample.com?whichvideo=id0

它在网络浏览器中显示文字链接： http://someotherserver.com/somesubdomainrandomuniquenumber/thisisyourvideovalidforsometime.mp4

或 http://www.getthisvideoexample.com?whichvideo=id0&webm=true

并在网页浏览器中显示文字链接： http://someotherserver.com/somesubdomainrandomuniquenumber/thisisyourvideovalidforsometime.webm

但是这个服务器有时候，当负载很高时，会返回500错误。所以我需要处理这一切。

让我们举个例子：

<video id="myVideo"></video>
var player = new MediaElementPlayer('#myVideo', {
type: ['video/mp4', 'video/webm'],
success: function (mediaElement, domObject) {

    var sources = [
        { src: "HOW_TO_PUT_HERE_DYNAMICALLY_LOADED_MP4_LINK?", type: 'video/mp4' },
        { src: "HOW_TO_PUT_HERE_DYNAMICALLY_LOADED_WEBM_LINK?", type: 'video/webm' }
    ];

    mediaElement.setSrc(sources);
    mediaElement.load();
    mediaElement.play();
}

}）;

另外如何制作，如果返回500或其他错误而不是链接到视频，代码将等待几秒钟再试一次，或显示带有文字的消息＆＃34;再次尝试，等待...... ＆＃34 ;? 感谢。

Answer 1

我会尝试不同的方法。

我会在jQuery.ajax()循环中放置一个ajax请求（使用setInterval）（也许每2秒）。如果是AJAX请求，

http://www.getthisvideoexample.com?whichvideo=id0 //返回MP4文件

......或

http://www.getthisvideoexample.com?whichvideo=id0&webm=true //返回一个webm文件

...成功，然后清除间隔（clearInterval()），否则继续尝试直到服务器成功响应（如果服务器不是，您可能需要设置一个方法来清除间隔一段时间可用，否则你将最终进入无限循环）

操作方法？

如果ajax请求成功，那么我将使用<video>构建response标记结构，并将标记附加到视频容器（或许<div>）

然后我将MEJS绑定到新附加标签的选择器，如：

var URL = "http://www.getthisvideoexample.com?whichvideo=id0 "; // request video URL
jQuery(document).ready(function ($) {
    var getVideo = setInterval(function () {
        $.ajax({
            url: URL,
            cache: false,
            dataType: "json", // or else
            success: function (response) {
                clearInterval(getVideo); // ends loop
                // build video tag
                // select proper type, based on response
                var video = '<video id="video_player" width="320" height="240" controls>' +
                    '<source src="' + response + '" type="video/' + (response.indexOf("webm") == -1 ? 'mp4' : 'webm') + '" />' +
                    '</video>';
                // target container's selector
                $("#videoContainer")
                .html(video) // insert video tag
                .find("#video_player") // find video selector after insertion
                // bind MEJS
                .mediaelementplayer({
                    // MEJS options
                });
            },
            error: function () {
                // error in ajax, will try again in 2 seconds
            }
        });
    }, 2000);
}); // ready

从ajax动态地将视频源加载到videojs或mediaelementjs中？

1 个答案: