h5播放m3u8格式的视频

前提: 最近有个需求需要 h5界面播放一个1G的视频,害怕卡顿

解决方式: 用视频切片的方式解决

操作验证

我们先来一个m3u8 格式的视频文件
随便找一个视频文件,按照这个操作我们就成功得到了 m3u8格式的视频

@echo 
rem 开始转码...  
rem 正在转码... 
ffmpeg -i video.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 5 output/playlist.m3u8
pause
1
2
3
4
5

关键脚本代码写这里

书写h5代码

DOCTYPE html>
<html>

<head>
  <title>dplayer播放m3u8title>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <script src="https://cdn.staticfile.org/hls.js/1.1.2/hls.min.js">script>
  <script src="https://cdn.staticfile.org/dplayer/1.26.0/DPlayer.min.js">script>
  <style>
    #dplayer {
      width: 800px
    }
  style>
  <script>
    function init() {
      const dp = new DPlayer({
        element: document.getElementById('dplayer'),
        video: {
          //  pic: videoInfo.img, // 封面
          url: "/output/playlist.m3u8",  //此处可以是远程的url,也可以是本地的文件
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
    }
  script>
head>

<body onload="init()">
  <div>
    <div id="dplayer">div>
  div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

但是有一点需要注意,直接用浏览器打开这个文件是不行的
需要将其放在服务器上
如果有python3的环境
可以

python -m http.server
1

如果有nginx,可以用nginx代理一下
如果是IDE,可以让其运行在server上
ok,搞定!

相关阅读:
数据结构——时间复杂度和空间复杂度
【spring源码系列】之【FactoryBean类型的接口】
聊聊Hystrix的源码
【EndNote X9.1 汉化版使用指南】
web安全（初识）
基于增强形态学滤波的旋转机械故障诊断方法（MATLAB）
Word控件Spire.Doc 【表单域】教程(五)：如何在 C# 中更新 Ask 字段
Ai项目十四：基于 LeNet5 的手写数字识别及训练
QT开发使用的技巧、遇到的坑
rand()函数产生随机数详解

原文地址：https://blog.csdn.net/xiaoxiaodechongzi/article/details/126095795

h5播放m3u8格式的视频

前提: 最近有个需求需要 h5界面 播放一个1G的视频,害怕卡顿

解决方式: 用视频切片的方式解决

操作验证

前提: 最近有个需求需要 h5界面播放一个1G的视频,害怕卡顿