问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

video.js播放想播放m3u8格式的文件，用了videojs-contrib-hls也不行？

头像
geje
    11244

    想播放hls协议的就是m3u8文件，video.js原生不支持，官方有个插件videojs-contrib-hls，下载之后按官方说的装了不行，不过官方网站放的好好的，不知道哪出现了问题？难道是我本地测试的原因？前两天放到服务器上好像还不行，服务器还需要配置什么东西嘛？

    html5javascript
    阅读 38.3k
    7 个回答
    得票最新
    头像
    xjsaber
      24
      新手上路，请多包涵

      刚内网试了下直播，可以用videojs-contrib-hls.js实现播放m3u8格式的文件。

      情景是客户端用obs推流，服务器使用nginx-with-rtmp。

      页面代码如下：

      <html>
    <head>
        <link href="http://vjs.zencdn.net/5.5.3/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>
    </head>
    <body>
        <h1>放松放松法的直播间</h1>
        <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
               poster="https://img.alicdn.com/imgextra/i2/754328530/TB2FpxhkXXXXXa5XXXXXXXXXXXX_!!754328530.jpg" data-setup="{}">
            <source src="rtmp://192.168.47.156/hls/1234" type="rtmp/flv">
            <!-- 如果上面的rtmp流无法播放，就播放hls流 -->
            <source src="http://192.168.47.156:8080/hls/1234.m3u8" type='application/x-mpegURL'>
            <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>
        <script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.js" type="text/javascript"></script>
    </body>
</html>
      头像
      cent_50
        1
        新手上路，请多包涵

        我也遇到这个问题，下载videojs-contrib-hls，不知道怎么用。请问你解决了吗

        头像
        akesure
          14
          新手上路，请多包涵

          如何解决了videojs播放m3u8的问题。

          头像
          Object
            2.8k1823

            我也遇到了这样的问题，不加密的hls是可以播放的 不过aes128切片的hls无法播放 求解决的分享

            头像
            hefunction
              2
              新手上路，请多包涵
              <link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
<video id="example-video" width=960 height=540 class="video-js vjs-default-skin" controls poster="******.jpg">
    <source src="http://*******/test-vedio-hls.m3u8" type="application/x-mpegURL">
</video>

<script type="text/javascript" src="http://****/video.min.js"></script>
<script type="text/javascript" src="http://****/videojs.hls.min.js"></script>
<script type="text/javascript">
var player = videojs('example-video');
//player.play();
</script>

              重点来了：起个localhost/访问。

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