步骤

  1. 引入 video-js
  2. 定义一个 video 标签,源就直接填写 m3u8 路径好了
  3. 初始化,直接用

教程refer: GO video.js: GO

保存为HTML文件，双击打开即可播放。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Video.js 7.4.1</title>
  6.     <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
  7.     <style>
  8.       body {
  9.         background-color: #191919;
  10.       }
  11.       .m {
  12.         width: 960px;
  13.         height: 400px;
  14.         margin-left: auto;
  15.         margin-right: auto;
  16.         margin-top: 100px;
  17.       }
  18.     </style>
  19.   </head>
  21.   <body>
  22.     <div class="m">
  23.       <video
  24.         id="my-video"
  25.         class="video-js"
  26.         controls
  27.         preload="auto"
  28.         width="960"
  29.         height="400"
  30.         poster="m.jpg"
  31.         data-setup="{}"
  32.       >
  33.         <source
  34.           src="http://122.193.19.2:8088/1008-80d60cc3-6a5a-4e8d-b2c4-eae0bbe2d5c9/index.m3u8"
  35.           type="application/x-mpegURL"
  36.         />
  37.         <!-- <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
  38.         <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> -->
  39.         <p class="vjs-no-js">
  40.           To view this video please enable JavaScript, and consider upgrading to
  41.           a web browser that
  42.           <a href="http://videojs.com/html5-video-support/" target="_blank"
  43.             >supports HTML5 video</a
  44.           >
  45.         </p>
  46.       </video>
  47.       <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
  48.       <script type="text/javascript">
  49.         //设置中文
  50.         videojs.addLanguage("zh-CN", {
  51.           Play: "播放",
  52.           Pause: "暂停",
  53.           "Current Time": "当前时间",
  54.           Duration: "时长",
  55.           "Remaining Time": "剩余时间",
  56.           "Stream Type": "媒体流类型",
  57.           LIVE: "直播",
  58.           Loaded: "加载完毕",
  59.           Progress: "进度",
  60.           Fullscreen: "全屏",
  61.           "Non-Fullscreen": "退出全屏",
  62.           Mute: "静音",
  63.           Unmute: "取消静音",
  64.           "Playback Rate": "播放速度",
  65.           Subtitles: "字幕",
  66.           "subtitles off": "关闭字幕",
  67.           Captions: "内嵌字幕",
  68.           "captions off": "关闭内嵌字幕",
  69.           Chapters: "节目段落",
  70.           "Close Modal Dialog": "关闭弹窗",
  71.           Descriptions: "描述",
  72.           "descriptions off": "关闭描述",
  73.           "Audio Track": "音轨",
  74.           "You aborted the media playback": "视频播放被终止",
  75.           "A network error caused the media download to fail part-way.":
  76.             "网络错误导致视频下载中途失败。",
  77.           "The media could not be loaded, either because the server or network failed or because the format is not supported.":
  78.             "视频因格式不支持或者服务器或网络的问题无法加载。",
  79.           "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":
  80.             "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
  81.           "No compatible source was found for this media.":
  82.             "无法找到此视频兼容的源。",
  83.           "The media is encrypted and we do not have the keys to decrypt it.":
  84.             "视频已加密，无法解密。",
  85.           "Play Video": "播放视频",
  86.           Close: "关闭",
  87.           "Modal Window": "弹窗",
  88.           "This is a modal window": "这是一个弹窗",
  89.           "This modal can be closed by pressing the Escape key or activating the close button.":
  90.             "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
  91.           ", opens captions settings dialog": ", 开启标题设置弹窗",
  92.           ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
  93.           ", opens descriptions settings dialog": ", 开启描述设置弹窗",
  94.           ", selected": ", 选择",
  95.           "captions settings": "字幕设定",
  96.           "Audio Player": "音频播放器",
  97.           "Video Player": "视频播放器",
  98.           Replay: "重播",
  99.           "Progress Bar": "进度小节",
  100.           "Volume Level": "音量",
  101.           "subtitles settings": "字幕设定",
  102.           "descriptions settings": "描述设定",
  103.           Text: "文字",
  104.           White: "白",
  105.           Black: "黑",
  106.           Red: "红",
  107.           Green: "绿",
  108.           Blue: "蓝",
  109.           Yellow: "黄",
  110.           Magenta: "紫红",
  111.           Cyan: "青",
  112.           Background: "背景",
  113.           Window: "视窗",
  114.           Transparent: "透明",
  115.           "Semi-Transparent": "半透明",
  116.           Opaque: "不透明",
  117.           "Font Size": "字体尺寸",
  118.           "Text Edge Style": "字体边缘样式",
  119.           None: "无",
  120.           Raised: "浮雕",
  121.           Depressed: "压低",
  122.           Uniform: "均匀",
  123.           Dropshadow: "下阴影",
  124.           "Font Family": "字体库",
  125.           "Proportional Sans-Serif": "比例无细体",
  126.           "Monospace Sans-Serif": "单间隔无细体",
  127.           "Proportional Serif": "比例细体",
  128.           "Monospace Serif": "单间隔细体",
  129.           Casual: "舒适",
  130.           Script: "手写体",
  131.           "Small Caps": "小型大写字体",
  132.           Reset: "重启",
  133.           "restore all settings to the default values": "恢复全部设定至预设值",
  134.           Done: "完成",
  135.           "Caption Settings Dialog": "字幕设定视窗",
  136.           "Beginning of dialog window. Escape will cancel and close the window.":
  137.             "开始对话视窗。离开会取消及关闭视窗",
  138.           "End of dialog window.": "结束对话视窗"
  139.         });
  141.         var myPlayer = videojs("my-video");
  142.         videojs("my-video").ready(function() {
  143.           var myPlayer = this;
  144.           myPlayer.play();
  145.         });
  146.       </script>
  147.     </div>
  148.   </body>
  149. </html>