视频在 w3school 的 Try-It-editor 网站上运行正常,但无法在我的网站上自行打开

问题描述 投票:0回答:0
  • 我组装了下面的代码,以便从我的一个站点播放 hls 流提要。
  • 当我使用 W3School 的编辑器时,它运行得非常好,可以立即启动 但是
  • 当我从我的网站运行它时,页面打开显示一个小黑框,里面有一个播放按钮(箭头),
  • 如果点击播放按钮然后视频开始运行(虽然不是全屏)。
    -所以我真的有两个问题,如何没有黑盒,这样视频就可以像在 W3schhol 的网站上一样立即开始播放,第二个可选的是如何在使用元视口后让它占据整个屏幕

...

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <head>
    <link
        href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css"
        rel="stylesheet"
     />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"> 
    </script>
    </head>
    <body>
    <video-js id="vid1" controls preload="auto">
        <!-- Replace the src URL with the HLS manifest URL for a given video
         You can access this from the Cloudflare Stream dashboard or via the Stream API 
    -->
        <source
            src="https://vcp.myplaytv.com/promar/promar/playlist.m3u8"
            type="application/x-mpegURL"
        />
    </video-js>

    <script>
        const vid = document.getElementById('vid1');
        const player = videojs(vid);
    </script>
    </body>
    </html>

... 谢谢 顺便说一句,我还在 W3Scools 打开了一个免费的网站,运行了脚本,还提出了黑盒

html video-streaming html5-video
© www.soinside.com 2019 - 2024. All rights reserved.