HTML hls视频流播放

最新推荐文章于 2024-08-12 18:29:22 发布

崽崽有点笨

最新推荐文章于 2024-08-12 18:29:22 发布

阅读量547

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_62285976/article/details/130421851

版权

本文介绍了如何使用HTML5的`<source>`标签结合video.js库实现HLS视频流的播放。通过引用video-js.css和video.js文件，可以轻松在网页中添加并播放HLS视频流。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
    <title>播放 RTMP 流</title>
    <meta charset="utf-8">
    <style>
        /* .video-js {
            width: 670px;
            height: 460px;
        } */
    </style>
 <link href="./css/video-js.css" rel="stylesheet">
 <script src="./js/video.js"></script>
 <script src="./js/bigdata/jquery-3.5.1.min.js"></script>
<body>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="360" data-setup="{}">
        <source id="asdd"
            src=""
            type="application/x-mpegURL">
    </video>
</body>
<script>
 
    const paramsString = window.location.search;
    const searchParams = new URLSearchParams(paramsStr