直播流Vue，flash打开方式

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

<board :boardId="boardId">
<div class=“board-container”>
&lt;div class="board-close" @click="back()"&gt;&lt;/div&gt;

&lt;!--企业视频--&gt;

&lt;div class="legendPanel-wrap"&gt;

  &lt;iframe :src="src" height="100%" width="100%" v-if="src"&gt;&lt;/iframe&gt;

&lt;/div&gt;

&lt;div style="display:none;" id="boardClose" @click="changeVedioFull()"&gt;&lt;/div&gt;
</div>
</board>

@imgBaseUrl: “…/…/…/assets/img/elevator”; .board-container { width: 100%; height: 100%; position: relative; .board-close { position: absolute; right: 0px; top: -52px; z-index: 10; width: 25px; height: 25px; background-image: url("/img/citymaker/close.png"); cursor: pointer; &:hover { background-image: url("/img/citymaker/close_hover.png"); } } .legendPanel-wrap { position: relative; width: 100%; } iframe { border: 0; height: 358px; overflow: hidden; width: 647px; } }

<!doctype html>

Video.js 5.18.4

<link href="video-js.css" rel="stylesheet">

<!-- If you'd like to support IE8 -->

<script src="videojs-ie8.min.js"></script>

<style>

    body{background-color: #191919}

    .m{ width: 640px; height: 264; margin-left: auto; margin-right: auto; margin-top: 100px; }

    *{

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

    .divWai{

        width:647px;

        height:358px;

    }

    .divWaiFull{

        width:1785px;

        height:761px;

    }

    .video-js{ /* 视频占满容器高度 */

        width: 100%!important;

        height: 100%!important;

        object-fit: fill;

        /* height: 358px; */

    }

    .fullDiv{

        position:absolute;

        width:30px;

        height:30px;

        color:#fff;

        bottom: 4px;

        right: 5px;

        cursor:pointer;

        z-index: 4;

        /* background-image: url("./img/full.png");

        background-size: 100% 100%;

        background-repeat: no-repeat; */

    }

    /* .fullDiv:hover {

        background-image: url("./img/fullHover.png");

    } */

    .fullCloseDiv{

        position:absolute;

        width:50px;

        height:50px;

        color:#fff;

        top: 10px;

        right: 16px;

        cursor:pointer;

        z-index: 4;

        /* background: url('./img/ic_hangup.png') no-repeat 0px 0px; */

        background-image: url("./img/close.png");

        /* background-size: cover; */

        background-repeat: no-repeat;

    }

    .fullCloseDiv:hover {

        background-image: url("./img/closeHover.png");

    }

</style>


  <div class="divWai" id="divWai">

    <video id="my-video" class="video-js" controls preload="auto" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">

        <source id="videoid" src="rtmp://113.106.58.74:9099/live/" type="rtmp/flv">

        <p class="vjs-no-js">

          To view this video please enable JavaScript, and consider upgrading to a web browser that

          <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>

        </p>

      </video>

      <div id="fullDiv" class="fullDiv" onclick="fullClick()"></div>

  </div>

  <script src="video.min.js"></script>

  <script type="text/javascript">

      function onload(){

        //   var src="rtmp://113.106.58.74:9099/live/";

          var src=getUrlParam(window.location.href,"src");

          document.getElementById("videoid").src=src;

          var myPlayer = videojs('my-video');

          videojs("my-video").ready(function(){

              var myPlayer = this;

              myPlayer.play();

          });

          if(window.parent['vedioView']){

            document.querySelector('.vjs-fullscreen-control.vjs-control.vjs-button').style.display = 'none';

            document.getElementById('divWai').className ='divWaiFull';

            document.getElementById('fullDiv').className ='fullCloseDiv';

          }

      }

      function fullClick(){

        window.parent.document.getElementById('boardClose').click();

      }

    function getUrlParam(url,n) {

        n = n.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');

        const regexS = '[\\?&]' + n + '=([^&#]*)';

        const regex = new RegExp(regexS);

        const results = regex.exec(url);

        if (results == null) {

            return '';

        } else {

            return unescape(results[1]);

        }

    }

</script>

![image|280x358](upload://httePRWbHSLHtuqxjEibUJX1e8E.png)