呵呵哒(￣▽￣)" 2024-05-27 20:20 采纳率: 66.7%
浏览 9

m3u8如何在网页的dialog上播放 vue

vue编程 :点击一个按钮，click事件触发，出现对话框，这个链接格式的http://ai-biaozhu-al.m3u8视频能在对话框播放

  • 写回答

2条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-05-27 20:20
    关注

    引自免费微信小程序：皆我百晓生

    要在网页的对话框（通常是指模态窗口）中播放M3U8格式的视频，你需要创建一个HTML页面，包含一个按钮用于触发对话框显示，以及在对话框内部嵌入一个Video元素来播放视频。下面是一个详细的步骤：

    1. 创建HTML结构，包括一个按钮和一个隐藏的对话框。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>M3U8 Video Player</title>
    <style>
        /* 样式可以根据实际需求调整 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
    </style>
</head>
<body>
    <button id="playButton">播放视频</button>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <video id="videoPlayer" controls></video>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
    1. 创建JavaScript脚本（script.js），负责处理点击按钮后显示对话框，并在其中加载M3U8视频。
    document.getElementById('playButton').addEventListener('click', function () {
    // 显示对话框
    document.getElementById('myModal').style.display = 'block';

    // 获取Video元素并设置src为M3U8链接
    var videoPlayer = document.getElementById('videoPlayer');
    videoPlayer.src = 'http://ai-biaozhu-al.m3u8';
    videoPlayer.load();
});
    1. 将CSS样式和JavaScript脚本放在相应的文件夹中，并确保它们与HTML文件在同一目录下。然后，在浏览器中打开HTML文件，点击“播放视频”按钮，将会弹出一个对话框，其中包含M3U8格式的视频。

    注意：由于安全限制，某些浏览器可能不允许直接在弹出的对话框中播放M3U8流媒体。在这种情况下，你可能需要将视频流转换为其他格式（如HLS或MP4），或者使用第三方库（例如dash.js或hls.js）来支持M3U8播放。此外，如果你在本地开发，记得确保你的M3U8链接可以被外部访问，否则可能会因为跨域问题而无法播放。在生产环境中，这通常不会成为问题，因为服务器会正确配置CORS策略。

    评论 编辑记录

报告相同问题？

问题事件

  • 修改了问题 5月27日
  • 修改了问题 5月27日
  • 修改了问题 5月27日
  • 创建了问题 5月27日

悬赏问题

  • ¥15 Qt安装后运行不了，这是我电脑的问题吗
  • ¥15 数据量少可以用MK趋势分析吗
  • ¥15 使用VH6501干扰RTR位，CANoe上显示的错误帧不足32个就进入bus off快慢恢复，为什么？
  • ¥15 大智慧怎么编写一个选股程序
  • ¥100 python 调用 cgps 命令获取 实时位置信息
  • ¥15 两台交换机分别是trunk接口和access接口为何无法通信，通信过程是如何？
  • ¥15 C语言使用vscode编码错误
  • ¥15 用KSV5转成本时，如何不生成那笔中间凭证
  • ¥20 ensp怎么配置让PC1和PC2通讯上
  • ¥50 有没有适合匹配类似图中的运动规律的图像处理算法