Javascript 使用Windows Media Player作为视频标签的视频回退

使用例如video.js让视频跨平台播放有点麻烦。回到应该嵌入视频的年代，我使用嵌入式Windows media player，它在Windows上开箱即用。因为现在只有Windows上的旧IE不支持视频标签，所以我尝试使用Windows media player作为后备，而且效果很好

我想知道的是，为什么其他人没有这个解决方案？我错过什么了吗？代码非常小，没有flash文件、跨域问题或需要服务器才能工作。它只是工作

因此，在我进一步开发此功能并添加自定义控件和字幕支持之前，我想知道您是怎么说的

代码如下所示：

<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');

功能手柄（vElementId）{
var useVideoTag=（typeof（document.createElement（'video'）.canPlayType）！='undefined'），
vElement=document.getElementById（vElementId），
src=vElement.getAttribute（'data-wimpsource'），
播放代码=“”+
'' + 
'   ' + 
'   ' + 
'   ' + 
'   ' + 
'   ' + 
'   ' + 
'';
如果（！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（“我的视频”）；

这是一个有效的演示：

这里有一个JSFIDLE：

---

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

需要考虑以下几点：

• 只有在目标设备上安装了windows media player时，才能使用windows media player。我想在装有Internet explorer的windows机器上可以，但在Firefox、Chrome或Mac上，用户需要安装特定的插件。在不支持HTML5视频的设备上，Flash的采用率更高（95%+）
• Flash允许进行自适应比特率流媒体播放、高清播放以及良好的性能、DRM和构建自定义控件。我不确定WMP组件是如何运行的（微软使用Silverlight来实现这一点……他们已经决定停止使用，转而支持HTML5视频）
• 现在支持HTML5视频。主要的例外是IE8。我想你应该努力构建一个好的HTML5视频体验（特别是对于移动设备），并提供一个可能更少的选择（所谓的优雅降级）

---

总而言之，您可以使用WMP作为后备方案，它将覆盖您的大多数用户（即6、7、8…），但选择flash作为后备方案是更好的选择。如果您愿意，可以查看一下以了解最新情况。

那么您为什么要使用Windows media player？一个回退还不够吗？是的，我知道Flash被用作回退，但正如我提到的，它的设置和运行有点麻烦。它有跨域问题，必须放在服务器上，必须安装Flash等。需要回退解决方案的浏览器是IE6-8，这些浏览器的用户都坐在Windows上，所有Windows都安装了WMP。它是操作系统的一部分。WMP是一款支持DRM、HD等的quit advance媒体播放器。自定义控件将以HTML格式开发，并且对于两种解决方案都是相同的，因此如果您想要自定义它，您不必同时在Flash和HTML中进行。使用WMP是一种有效的解决方案。尽管在我看来，Flash=更好的覆盖范围和性能/定制。其他人可以证实这一点。我理解两次开发Flash和HTML是一件痛苦的事情。大多数人不会自己做（或者会提供较少的HTML5或Flash体验）。你是否考虑过使用JW播放器或Flow player，他们有统一的API Flash/HTML5？是的，我一直在使用JW播放器和video.js（并且是以前的Flash开发人员）。他们可以完成这项工作，但我的经验是，由于跨域问题，在复杂的CMS系统中使用时，他们的工作效果不太好，需要一些时间进行设置。因为我是一个懒惰的开发人员，所以我喜欢想出一些能很快奏效的东西。：）