Video.js 的在线网页嵌入HTML5代码

Video.js

Video.js：https://videojs.com/

Video.js 嵌入式代码获取：https://videojs.com/getting-started

在线加载测试资源

Bing图片API：https://api.dujin.org/bing/1920.php

西瓜视频播放器介绍视频MP4：https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-720p.mp4

南通卫视M3U8在线直播源：https://nt-hls.ntjoy.com/live/4f1.m3u8

视频嵌入相关网址

精美好用的HTML5视频播放器分享：https://www.devgox.com/archives/724.html

南通广播电视台在线直播：https://www.devgox.com/archives/3224.html

随机壁纸图片 API接口：https://www.devgox.com/archives/1566.html

VIDEO.JS MP4 视频嵌入

VIDEO.JS MP4 视频嵌入代码

<head>
  <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
  <!-- 如果您想支持IE8（适用于v7之前的Video.js版本） -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<center>
<body>
  <video
    id="my-video"
    class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
    controls
    preload="auto"
    width="560"
    height="315"
    poster="替换为图片链接地址"
    data-setup="{}"
  >
    <source src="替换为mp4视频链接地址" type="video/mp4" />
    <source src="替换为webm视频链接地址" type="video/webm" />
    <p class="vjs-no-js">
      要观看此视频，请启用JavaScript，并考虑升级到web浏览器
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >支持HTML5视频</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
</body>
</center>

VIDEO.JS M3U8 视频（支持直播源）嵌入

VIDEO.JS M3U8 视频嵌入代码

<head>
  <link href="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video-js.min.css" rel="stylesheet">
  <!-- 引入 Video.js 脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video.min.js"></script>
  <!-- 如果您想支持IE8（适用于v7之前的Video.js版本） -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<center>
<body>
  <video
    id="my-video"
    class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
    controls
    preload="auto"
    width="560"
    height="315"
    poster="图片链接地址"
    data-setup="{}"
  >
    <source src="视频链接地址" type="application/x-mpegURL" />
    <p class="vjs-no-js">
      要观看此视频，请启用JavaScript，并考虑升级到web浏览器
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >支持HTML5视频</a
      >
    </p>
  </video>
  <!-- 初始化 Video.js -->
  <script>
    var player = videojs('my-video');
  </script>
  <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
</body>
</center>

打赏赞