使用作为视频标签的视频备份

Question

使用video.js来播放跨平台的视频有点麻烦。在视频应该嵌入的日子里，我使用的是嵌入式Windows媒体播放器，它在Windows上运行良好。因为现在只有Windows上的旧IE不支持视频标签，所以我尝试过使用Windows媒体播放器作为后盾，而且效果很好。

我想知道的是，为什么其他人没有这样的解决方案？我错过了什么吗？代码非常小，没有闪存文件，跨域问题，或者需要服务器来实现这个功能。只是起作用了。

因此，在我进一步开发这一点并添加自定义控件和字幕支持之前，我想知道您说了什么。

代码如下所示：

<video id="myVideo" style="width:640px; height: 360px;" autoplay data-wimpsource="http://esd.volvocars.com/dc/cdn/video/birds-on-a-wire.mp4">
    <source src="http://esd.volvocars.com/dc/cdn/video/birds-on-a-wire.mp4" type="video/mp4" />
    <source src="http://esd.volvocars.com/dc/cdn/video/birds-on-a-wire.webm" type="video/webm" />
</video>

function handleVideo(vElementId) {
    var useVideoTag = (typeof(document.createElement('video').canPlayType) != 'undefined'),
        vElement = document.getElementById(vElementId),
        src = vElement.getAttribute('data-wimpsource'),
        playerCode =    '<object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="loading media player components..." type="application/x-oleobject" width="100%" height="100%">' + 
                        '<param name="filename" value="' + src + '">' + 
                        '   <param name="animationatstart" value="true">' + 
                        '   <param name="transparentatstart" value="true">' + 
                        '   <param name="autostart" value="true">' + 
                        '   <param name="showcontrols" value="false">' + 
                        '   <param name="ShowStatusBar" value="false">' + 
                        '   <param name="windowlessvideo" value="true">' + 
                        '</object>';

    if (!useVideoTag) {
        var newDiv = document.createElement("div");
        newDiv.style.width = vElement.style.width;
        newDiv.style.height = vElement.style.height;
        vElement.parentNode.replaceChild(newDiv, vElement);
        newDiv.innerHTML = playerCode
    }
}

handleVideo('myVideo');

下面是一个工作演示：http://verodella.se/wimpify.html

下面是一个JsFiddle：http://jsfiddle.net/arpo/t5Jtx/

Answer 1

多年来，Flash一直被用作在网络上播放视频的行业标准(Youtube确实推动了每个人都朝着这个方向前进)。所以我想答案的一部分就在这里。

有几件事要考虑：

• 只有在目标设备上安装了windows媒体播放器时，才能使用windows媒体播放器。我想，在windows机器上使用Internet explorer是可以的，但是在Firefox、Chrome或Mac上，用户需要安装一个特定的插件。闪存在不支持95%+视频的设备上有更广泛的采用率( HTML5 )。
• 闪存允许做自适应比特率流，高清播放与体面的性能，DRM和建立自定义控制。我不确定WMP组件是如何使用的(Microsoft使用Silverlight实现该组件)。他们决定停止使用HTML5视频)。
• 80%的浏览器现在支持HTML5视频。主要的例外是IE8。我想你的努力应该建立一个良好的HTML5视频体验(特别是对于移动)，并提供一个可能较小的选择(优雅的退化，因为它被称为)。

总之，您可以使用WMP作为后盾，它将覆盖大多数用户(IE 6,7,8 .)但选择闪光灯作为退路是一个更好的选择。如果您想要的话，可以查看一下Adobe选通，以达到最新的速度。