Giter Site home page Giter Site logo

网页播放HLS about zlmediakit HOT 6 CLOSED

wanghouting123 avatar wanghouting123 commented on May 22, 2024
网页播放HLS

from zlmediakit.

Comments (6)

xia-chu avatar xia-chu commented on May 22, 2024 2

经过实测，使用以下代码可以在chrome浏览器播放ZLMediaKit生成的hls视频：


<head>
  <link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="http://127.0.0.1/live/0/hls.m3u8" type='application/vnd.apple.mpegurl'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
</body>

from zlmediakit.

xia-chu avatar xia-chu commented on May 22, 2024

你是推流还是拉流之后生成的hls文件？能否说下你的应用场景

from zlmediakit.

wanghouting123 avatar wanghouting123 commented on May 22, 2024

我是拉取监控摄像头的rtsp流然后转成hls。前端用的vue+video.js播放，也尝试用了ckplayer网页播放器，都是播放不了

from zlmediakit.

xia-chu avatar xia-chu commented on May 22, 2024

你看下是否是跨域的问题？假如说你hls的服务器地址跟你播放页面的地址不一样 就可能存在跨域问题

from zlmediakit.

wanghouting123 avatar wanghouting123 commented on May 22, 2024

跨域的话js有提示的，浏览器上没有任何报错，同一个http服务器也是不行的,用ffmpeg 命令生成的hls可以播放

from zlmediakit.

media1984 avatar media1984 commented on May 22, 2024

经过实测，使用以下代码可以在chrome浏览器播放ZLMediaKit生成的hls视频：


<head>
  <link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="http://127.0.0.1/live/0/hls.m3u8" type='application/vnd.apple.mpegurl'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
</body>

好用 这个测试了

from zlmediakit.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.