VideoJS live RTMP stream, player and video size issue

Myth丶恋晨 2022-09-23 05:54 134阅读 0赞

# ![i.gif_e_eyJhdiI6Njk5NzAsImF0Ijo0LCJidCI6MCwiY20iOjQyNDg4MywiY2giOjExNzgsImNrIjp7fSwiY3IiOjE1MzQ0NDAsImRpIjoiNmIxNTYxYzRhN2NhNDczMThiOGU5ODVmZjM5NjZhNzkiLCJkbSI6MSwiZmMiOjE3OTA3NzAsImZsIjoxNjk0NjkxLCJpcCI6IjM2LjI1MS4yNDguMTcwIiwia3ciOiJodG1sNSx2aWRlbyxydG1wLHZpZGVvLmpzIiwibWsiOiJ2aWRlbyx2aWRlby5qcyIsIm53IjoyMiwicGMiOjExLjUsImVjIjoxMS41LCJwciI6NzY1LCJydCI6MiwicmYiOiJodHRwOi8vd3d3LnNvLmNvbS9saW5rP3VybD1odHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzMwMzgzMTM1L3ZpZGVvanMtbGl2ZS1ydG1wLXN0cmVhbS1wbGF5ZXItYW5kLXZpZGVvLXNpemUtaXNzdWUmcT1qcytydG1wJnRzPTE0Njc3NjczNzAmdD01N2JlNmU0ZmJlOTI1ZmM4ZmE4OGY1ZDAyNzE4YzczJnNyYz1oYW9zb3UiLCJzdCI6ODI3NywidWsiOiJ1ZTEtNjY4M2YxNzdiMTg5NDY3ZjhkY2EwOGFlYjMwMjQ4ZGMiLCJ6biI6NDMsInRzIjoxNDY3NzY3ODQ2NTY0LCJiZiI6dHJ1ZSwicG4iOiJhZHplcmsxNjAyMjQzMDMyIiwiZnEiOjB9_s_f4aqwCfuxgZ013FccLhGTIJqCKY][] #

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>  
     <a title="This question shows research effort; it is useful and clear" rel="nofollow"> up vote</a> 
     <span>1</span> 
     <a title="This question does not show any research effort; it is unclear or not useful" rel="nofollow">down vote</a> 
     <a href="http://stackoverflow.com/questions/30383135/videojs-live-rtmp-stream-player-and-video-size-issue#" rel="nofollow">favorite</a> 
     <div> 
      <strong></strong> 
     </div> 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <p>I have setup a page with a videojs html5 player that automatically starts to play a remote RTMP live stream. It works.</p> 
      <p>When I start the stream the video appears as a tiny box in the top left of the player. The player is 1280x720 and the video is streaming from a computer or android phone at any resolution, but it also starts in the top left corner.</p> 
      <p>I haven't measured the resolution of the video in the corner but I'd guess it's about 40x40. When I select the fullscreen option the video stretches to full screen. When I shut off fullscreen the video correctly fills in the player. </p> 
      <p>I would expect the video to start and fill the player right away without having to fullscreen/restore it. Any advice or direction would be greatly appreciated it.</p> 
      <p>This is what I'm working with</p> 
      <p></p> 
      <div> 
       <div> 
        <pre><code><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Stream Player &lt;/title&gt;
 &lt;link href="video-js.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="video.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    videojs.options.flash.swf = "video-js.swf";
  &lt;/script&gt;
&lt;/head&gt;
&lt;body bgcolor=000000&gt;
 &lt;center&gt;
  &lt;font face="verdana" color=993333&gt;&lt;h1&gt;Test&lt;/h1&gt;&lt;/font&gt;
   &lt;video id="livestream" class="video-js vjs-default-skin vjs-big-play-centered"
     controls autoplay preload="auto" width="1280" height="720"
     data-setup='{"example_option":true}'&gt;
      &lt;source src="rtmp://webserver.example:1935/live/streamname" type="rtmp/mp4"&gt;
   &lt;/video&gt;
 &lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;</code></code></pre> 
       </div> 
      </div> 
      <p></p> 
      <p></p> 
     </div> 
     <div> 
      <a title="show questions tagged 'html5'" href="http://stackoverflow.com/questions/tagged/html5" rel="nofollow">html5</a> 
      <a title="show questions tagged 'video'" href="http://stackoverflow.com/questions/tagged/video" rel="nofollow"> video</a> 
      <a title="show questions tagged 'rtmp'" href="http://stackoverflow.com/questions/tagged/rtmp" rel="nofollow"> rtmp</a> 
      <a title="show questions tagged 'video.js'" href="http://stackoverflow.com/questions/tagged/video.js" rel="nofollow"> video.js</a> 
     </div> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <div> 
          <a title="short permalink to this question" href="http://stackoverflow.com/q/30383135" rel="nofollow">share</a> 
          <span>|</span> 
          <a title="" href="http://stackoverflow.com/posts/30383135/edit" rel="nofollow">improve this question</a> 
         </div> </td> 
        <td> 
         <div> 
          <div>
            asked 
           <span title="2015-05-21 19:53:41Z"> May 21 '15 at 19:53</span> 
          </div> 
          <div> 
           <a href="http://stackoverflow.com/users/4926355/wally-anderson" rel="nofollow"></a> 
           <div> 
            <img width="32" height="32" alt=""> 
           </div> 
          </div> 
          <div> 
           <a href="http://stackoverflow.com/users/4926355/wally-anderson" rel="nofollow">Wally Anderson</a> 
           <div> 
            <span title="reputation score ">6</span> 
            <span title="1 silver badge"><span></span><span>1</span></span> 
            <span title="4 bronze badges"><span></span><span>4</span></span> 
           </div> 
          </div> 
         </div> </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td> 
    <div> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <table> 
          <tbody> 
           <tr> 
            <td>&nbsp;&nbsp;</td> 
            <td>&nbsp;</td> 
           </tr> 
          </tbody> 
         </table> </td> 
        <td> 
         <div style="display:block"> 
          <span>I switched my search terms on google from to include "squished" and got some helpful results: <a href="https://github.com/videojs/video-js-swf/issues/55" rel="nofollow"> github.com/videojs/video-js-swf/issues/55</a></span> –&nbsp; 
          <a title="6 reputation" href="http://stackoverflow.com/users/4926355/wally-anderson" rel="nofollow">Wally Anderson</a> 
          <span><span title="2015-05-21 20:06:21Z">May 21 '15 at 20:06</span></span> 
         </div> </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[i.gif_e_eyJhdiI6Njk5NzAsImF0Ijo0LCJidCI6MCwiY20iOjQyNDg4MywiY2giOjExNzgsImNrIjp7fSwiY3IiOjE1MzQ0NDAsImRpIjoiNmIxNTYxYzRhN2NhNDczMThiOGU5ODVmZjM5NjZhNzkiLCJkbSI6MSwiZmMiOjE3OTA3NzAsImZsIjoxNjk0NjkxLCJpcCI6IjM2LjI1MS4yNDguMTcwIiwia3ciOiJodG1sNSx2aWRlbyxydG1wLHZpZGVvLmpzIiwibWsiOiJ2aWRlbyx2aWRlby5qcyIsIm53IjoyMiwicGMiOjExLjUsImVjIjoxMS41LCJwciI6NzY1LCJydCI6MiwicmYiOiJodHRwOi8vd3d3LnNvLmNvbS9saW5rP3VybD1odHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzMwMzgzMTM1L3ZpZGVvanMtbGl2ZS1ydG1wLXN0cmVhbS1wbGF5ZXItYW5kLXZpZGVvLXNpemUtaXNzdWUmcT1qcytydG1wJnRzPTE0Njc3NjczNzAmdD01N2JlNmU0ZmJlOTI1ZmM4ZmE4OGY1ZDAyNzE4YzczJnNyYz1oYW9zb3UiLCJzdCI6ODI3NywidWsiOiJ1ZTEtNjY4M2YxNzdiMTg5NDY3ZjhkY2EwOGFlYjMwMjQ4ZGMiLCJ6biI6NDMsInRzIjoxNDY3NzY3ODQ2NTY0LCJiZiI6dHJ1ZSwicG4iOiJhZHplcmsxNjAyMjQzMDMyIiwiZnEiOjB9_s_f4aqwCfuxgZ013FccLhGTIJqCKY]: http://engine.adzerk.net/i.gif?e=eyJhdiI6Njk5NzAsImF0Ijo0LCJidCI6MCwiY20iOjQyNDg4MywiY2giOjExNzgsImNrIjp7fSwiY3IiOjE1MzQ0NDAsImRpIjoiNmIxNTYxYzRhN2NhNDczMThiOGU5ODVmZjM5NjZhNzkiLCJkbSI6MSwiZmMiOjE3OTA3NzAsImZsIjoxNjk0NjkxLCJpcCI6IjM2LjI1MS4yNDguMTcwIiwia3ciOiJodG1sNSx2aWRlbyxydG1wLHZpZGVvLmpzIiwibWsiOiJ2aWRlbyx2aWRlby5qcyIsIm53IjoyMiwicGMiOjExLjUsImVjIjoxMS41LCJwciI6NzY1LCJydCI6MiwicmYiOiJodHRwOi8vd3d3LnNvLmNvbS9saW5rP3VybD1odHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzMwMzgzMTM1L3ZpZGVvanMtbGl2ZS1ydG1wLXN0cmVhbS1wbGF5ZXItYW5kLXZpZGVvLXNpemUtaXNzdWUmcT1qcytydG1wJnRzPTE0Njc3NjczNzAmdD01N2JlNmU0ZmJlOTI1ZmM4ZmE4OGY1ZDAyNzE4YzczJnNyYz1oYW9zb3UiLCJzdCI6ODI3NywidWsiOiJ1ZTEtNjY4M2YxNzdiMTg5NDY3ZjhkY2EwOGFlYjMwMjQ4ZGMiLCJ6biI6NDMsInRzIjoxNDY3NzY3ODQ2NTY0LCJiZiI6dHJ1ZSwicG4iOiJhZHplcmsxNjAyMjQzMDMyIiwiZnEiOjB9&s=f4aqwCfuxgZ013FccLhGTIJqCKY