Azure Media Player自定义错误GIF及Application Insights日志配置方法

一、自定义错误界面（替换默认错误为GIF） #

Azure Media Player没有直接提供配置自定义错误界面的选项，需要通过监听播放器的error事件，手动替换默认错误元素为自定义内容：

1. 监听错误事件并替换界面 #

在播放器初始化完成后，绑定error事件，当错误发生时隐藏默认错误提示，插入包含自定义GIF的界面：

// 初始化Azure Media Player
var myPlayer = amp('vid1', myAmpOptions, function() {
    console.log('播放器初始化完成');
});

// 监听播放器错误事件
myPlayer.addEventListener('error', function() {
    const error = myPlayer.error();
    
    // 先记录错误到Application Insights（下文实现）
    trackAmpErrorToAI(error);

    // 隐藏默认错误显示元素
    const defaultErrorEl = document.querySelector('.amp-error-display');
    if (defaultErrorEl) {
        defaultErrorEl.style.display = 'none';
    }

    // 创建自定义错误容器
    const customErrorContainer = document.createElement('div');
    customErrorContainer.className = 'amp-custom-error';

    // 添加自定义GIF
    const errorGif = document.createElement('img');
    errorGif.src = '/custom-error.gif'; // 替换为你的GIF路径
    errorGif.alt = '直播流异常';

    // 添加自定义提示文本
    const errorText = document.createElement('p');
    errorText.textContent = '直播流暂时中断，请稍后重试';

    // 添加重试按钮
    const retryBtn = document.createElement('button');
    retryBtn.textContent = '重新加载';
    retryBtn.addEventListener('click', () => {
        // 移除自定义错误界面
        customErrorContainer.remove();
        // 重置播放器
        myPlayer.load();
        myPlayer.play();
    });

    // 组装自定义错误界面
    customErrorContainer.appendChild(errorGif);
    customErrorContainer.appendChild(errorText);
    customErrorContainer.appendChild(retryBtn);

    // 插入到播放器容器中
    const playerContainer = document.getElementById('vid1').parentElement;
    playerContainer.appendChild(customErrorContainer);
});

2. 添加自定义样式 #

在页面CSS中添加自定义错误界面的样式，确保布局合理：

.amp-custom-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.amp-custom-error img {
    width: 200px;
    margin-bottom: 16px;
}

.amp-custom-error p {
    color: #fff;
    font-size: 16px;
    margin: 0 0 16px;
}

.amp-custom-error button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background-color: #0078d4;
    color: #fff;
    cursor: pointer;
}

.amp-custom-error button:hover {
    background-color: #005a9e;
}

二、Application Insights 错误日志记录 #

确保已引入Application Insights SDK，然后实现错误追踪函数，将播放器错误信息上报：

1. 初始化Application Insights #

如果页面还未初始化AI，添加以下代码（替换为你的instrumentationKey）：

// 初始化Application Insights
const appInsights = window.appInsights || function(config) {
    function s(config) { t[config] = function() { const i = arguments; t.queue.push(() => t[config].apply(t, i)) } }
    const t = { config: config }, r = document, f = window, e = "script", o = r.createElement(e);
    o.src = config.url || "https://az416426.vo.msecnd.net/scripts/b/ai.0.js";
    r.getElementsByTagName(e)[0].parentNode.appendChild(o);
    t.cookie = r.cookie; t.queue = [];
    const i = ["Event","Exception","Metric","PageView","Trace"];
    while(i.length) s("track"+i.pop());
    if(!config.disableExceptionTracking) {
        const i = "onerror"; s("_"+i);
        const u = f[i];
        f[i] = function(config,r,f,e,o) {
            const s = u && u(config,r,f,e,o);
            return s!==!0 && t["_"+i](config,r,f,e,o), s;
        }
    }
    return t;
}({
    instrumentationKey: "YOUR_INSTRUMENTATION_KEY" // 替换为你的AI密钥
});
window.appInsights = appInsights;
appInsights.trackPageView();

2. 实现错误追踪函数 #

在之前的错误事件监听中调用该函数，上报错误详情：

// 上报AMP错误到Application Insights
function trackAmpErrorToAI(error) {
    if (!error) return;
    appInsights.trackException({
        exception: new Error(`AMP播放错误: ${error.message} 错误码: ${error.code}`),
        properties: {
            errorCode: error.code,
            errorMessage: error.message,
            playerVersion: amp.version,
            streamType: "Live" // 标记为直播流
        }
    });
}

注意事项 #

• 确保自定义GIF的路径正确，可通过浏览器直接访问。
• 测试多种错误场景（网络中断、流源失效等），验证自定义界面和日志上报是否正常。
• 若播放器容器有特殊布局，需调整自定义错误界面的样式以适配。

内容的提问来源于stack exchange，提问作者Snowy