videojs打开falsh播放器就播放不了,打开html5播放器没问题

图片描述

<!DOCTYPE html>
<html lang="en" data-ng-app="app" style="height: 100%;">
<head>
  <meta charset="utf-8" />
  <title>live</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="css/video-js.min.css" type="text/css" />
</head>
<body>

   <video id="main-video" width=733 height=430 class=" vjs-big-play-centered  video-js vjs-default-skin" data-setup='{"autoplay": true}' controls style="border-radius: 4px;">
            </video>
</body>
  <!-- jQuery -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <!-- video -->
  <script src="vendor/video/video.min.js"></script>
  <script src="vendor/video/videojs-flash.js"></script>
  <script type="text/javascript">videojs.options.flash.swf = "vendor/video/video-js.swf";</script>

  <script>

      // var player = videojs('main-video', {techOrder: ['flash']});
    var player = videojs('main-video', {techOrder: ['html5']});

   var  cPlay = function () {
      player.src([
        {
          src:"http://onnvkbske.bkt.clouddn.com/recordings/z1.jiubaolivenet.kh2492628909T102129668/1499480497_1499480958.mp4",
          type: 'video/mp4',
          withCredentials: false
        }
      ]);
      player.play();


    };
    cPlay();

  </script>

</html>
阅读 10k
4 个回答

第一:本地测试需要手动配置浏览器支持flash。加载swf
第二:必须本地创建环境打开项目。

不会的加我QQ736001033我有demo

我这个可以播放,可以照我这样写,不过要开启http-server
image.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>测试rtmp直播源</title>
<script src="http://vjs.zencdn.net/7.6.6/video.js"></script>
<link href="http://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
</head>
<body>
<div class="openFlashTips" style="width:300px;position:absolute;top:20px;left:225px;z-Index:9999;color:white">视频无法正常播放,请点击下方启用flash</div>
<video id="my-video" style="color:black;width:750px;height:350px" class="video-js" autoplay controls preload="auto" width="750" height="350" data-setup="{}">
    <source src='rtmp://127.0.0.1:1935/live/' type='rtmp/flv'/>
</video>
<embed width="300" height="70" class="openFlash" style="position:absolute;top:130px;left:225px;z-Index:9999;" type="application/x-shockwave-flash">
<script type="text/javascript" language="JavaScript">
    function flashChecker() {
        var hasFlash = 0;         //是否安装了flash
        var flashVersion = 0; //flash版本
        var isIE = /*@cc_on!@*/0;      //是否IE浏览器

        if (isIE) {
            var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
            if (swf) {
                hasFlash = 1;
                VSwf = swf.GetVariable("$version");
                flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
            }
        } else {
            if (navigator.plugins && navigator.plugins.length > 0) {
                var swf = navigator.plugins["Shockwave Flash"];
                if (swf) {
                    hasFlash = 1;
                    var words = swf.description.split(" ");
                    for (var i = 0; i < words.length; ++i) {
                        if (isNaN(parseInt(words[i]))) continue;
                        flashVersion = parseInt(words[i]);
                    }
                }
            }
        }
        return {f: hasFlash, v: flashVersion};
    }

    var fls = flashChecker();
    var s = "";
    if (fls.f) {
        document.getElementsByClassName("openFlash")[0].style.display = "none";
        document.getElementsByClassName("openFlashTips")[0].style.display = "none";
//        document.write("您安装了flash,当前flash版本为: " + fls.v + ".x");
    }
    else {
        document.getElementsByClassName("openFlash")[0].style.display = "block";
        document.getElementsByClassName("openFlashTips")[0].style.display = "block";
//        document.write("您没有安装flash");
    }
</script>
</body>
</html>

techOrder改成['flash', 'html5'],然后浏览器调试看一下swf文件有没有加载。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题