m3u8视频播放HTML

39天前发布

047.8W+7950

m3u8视频播放HTML（1）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <!--https://www.bootcdn.cn/video.js/-->
    <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
    <!--https://www.bootcdn.cn/videojs-contrib-hls/-->
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
<body>
    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>    
        <source type="application/x-mpegURL"> //source 标签是设置静态资源的，如果是通过video的api动态设置文件，这标签不需要，不然会有一些问题
    </video>
</body>
<script>    
    // videojs 简单使用  
    var myVideo = videojs('myVideo',{
        bigPlayButton : true, 
        textTrackDisplay : false, 
        posterImage: false,
        errorDisplay : false,
    })
    myVideo.src([
          {
            src: "https://live.lcc369.com/live/247866100233007104.m3u8?auth_key=1678843489-0-0-c8abe1cdd00202203638b7e749147049",
            type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
          },
        ]);
    myVideo.play() // 视频播放
    myVideo.pause() // 视频暂停
</script>
</html>

m3u8视频播放HTML（2）

<!DOCTYPE html>
<html lang="">
  <head>
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.js"></script>
  </head>
  <body>
    <video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'> 
      <source src="https://live.lcc369.com/live/247866100233007104.m3u8?auth_key=1678843489-0-0-c8abe1cdd00202203638b7e749147049" type="application/x-mpegURL">
    </video>
  </body>
</html>

TG交流群（点击进入）----付费帮助搭建---修复---二开，以及发布求资源.
QQ交流群 922260178

1. 本站所提供的源码模板（主题/插件）等资源仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，有部分资源为网上收集或仿制而来，若模板侵犯了您的合法权益，请来信通知我们（Email: 1311978956@qq.com），我们会及时删除，给您带来的不便，我们深表歉意！
2. 分享目的仅供大家学习和交流，请不要用于商业用途！
3. 如果你也有好源码或者教程，可以到用户中心发布投稿，分享有佣金分成！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系站长，可领回失去的金币，并额外有奖！
6. 如遇到加密压缩包，默认解压密码为"www.77ym.top",如遇到无法解压的请联系管理员！
7. 本站部分文章、资源来自互联网，版权归原作者及网站所有，如果侵犯了您的权利，请及时联系我站删除。免责声明

THE END