edge浏览器不能播放html5视频

如何禁止edge浏览器播放HTML5视频

介绍

在开发Web应用程序时，有时我们希望禁止某些浏览器播放HTML5视频。本文将介绍如何禁止Edge浏览器播放HTML5视频，并提供详细的步骤和相关代码。

整体流程

为了禁止Edge浏览器播放HTML5视频，我们需要通过以下步骤来实现：

1. 检测浏览器类型。
2. 如果检测到浏览器为Edge，则禁止HTML5视频播放。
3. 提供备用视频播放方案，例如使用Flash。

下面是整个流程的表格表示：

详细步骤与代码

步骤1：检测浏览器类型

通过检测用户的user agent字符串可以判断用户所使用的浏览器类型。以下是示例代码：

// 获取用户的user agent
var userAgent = navigator.userAgent.toLowerCase();

// 判断是否为Edge浏览器
var isEdge = userAgent.indexOf("edge") > -1;

以上代码通过navigator.userAgent获取用户的user agent字符串，并转换为小写。然后使用indexOf方法判断字符串中是否包含"edge"，如果返回值大于-1，则表示浏览器为Edge。

步骤2：禁止HTML5视频播放

如果检测到用户使用的是Edge浏览器，我们需要禁止HTML5视频的播放。以下是示例代码：

if (isEdge) {
  // 获取所有的HTML5视频元素
  var videos = document.getElementsByTagName("video");

  // 禁用每个HTML5视频元素
  for (var i = 0; i < videos.length; i++) {
    videos[i].removeAttribute("controls");
    videos[i].src = ""; // 清空视频源
  }
}

以上代码通过getElementsByTagName方法获取页面中所有的HTML5视频元素，并使用循环遍历每个元素。然后使用removeAttribute方法移除controls属性，这样视频控制条就不会显示出来。同时，我们也将视频源设置为空，以确保视频不会加载和播放。

步骤3：提供备用的视频播放方案

禁止HTML5视频播放后，我们可以采用其他方案来提供视频播放功能，例如使用Flash。以下是示例代码：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        width="640" height="480" 
        codebase="
  <param name="movie" value="video.swf">
  <param name="quality" value="high">
  <embed src="video.swf" 
         quality="high" 
         pluginspage=" 
         type="application/x-shockwave-flash" 
         width="640" 
         height="480">
  </embed>
</object>

以上是一个使用Flash播放视频的示例代码。我们可以在HTML中插入这段代码，替代原本的HTML5视频元素。用户在Edge浏览器下将看到使用Flash播放的视频。

总结

通过以上步骤和代码，我们可以实现禁止Edge浏览器播放HTML5视频的效果。首先，我们检测浏览器类型，如果是Edge浏览器，则禁止HTML5视频的播放。然后，我们提供备用的视频播放方案，例如使用Flash。这样，用户在Edge浏览器下将无法播放HTML5视频，而是看到使用Flash播放的视频。

pie
  title 浏览器使用统计
  "Chrome" : 45.0
  "Firefox" : 25.0
  "Safari" : 15.0
  "Edge" : 10.0
  "其他" : 5.0

希