西瓜播放器是一个Web视频播放器类库，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。更重要的是它不只是在 UI 层有灵活的表现，在功能上也做了大胆的尝试：摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时，它也集成了对 flv、hls、dash 的点播和直播支持。

在线配置：https://v2.h5player.bytedance.com

因为互联网体制改革，FLASH兼容性越来越差，所以推荐大家使用HTML5方法；flv现在多数浏览器都不再支持，这里我们都是使用的his。

点播实例代码(mp4)：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>播放器</title>
    <style type="text/css">
      html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
      body {display:flex;}
      #mse {flex:auto;}
    </style>
    <script type="text/javascript">
      window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});
    </script>
  </head>
  <body>
    <div id="mse"></div>
    <script src="//sf1-ttcdn-tos.pstatp.com/obj/unpkg/xgplayer/2.9.6/browser/index.js" charset="utf-8"></script>
    <script src="//sf1-ttcdn-tos.pstatp.com/obj/unpkg/xgplayer-mp4/1.1.8/browser/index.js" charset="utf-8"></script>
    <script type="text/javascript">
      let player=new Player({
        id: 'mse',
        autoplay: true,
        volume: 0.3,
        url:'<?php echo $_GET['url'];?>',
        poster: "https://cdn.jsdelivr.net/gh/cc963020001/image/30f07120fcc36c44a7e9edd99d9581a5.jpg",
        playsinline: true,
        thumbnail: {
            pic_num: 44,
            width: 160,
            height: 90,
            col: 10,
            row: 10,
            urls: ['https://cdn.jsdelivr.net/gh/cc963020001/image/30f07120fcc36c44a7e9edd99d9581a5.jpg'],
        },
        danmu: {
          comments: [
            {
              duration: 15000,
              id: '1',
              start: 3000,
              txt: '欢迎来到360模板吧 www.360mb.net',
              style: {  //弹幕自定义样式
                color: '#ff9500',
                fontSize: '20px',
                border: 'solid 1px #ff9500',
                borderRadius: '50px',
                padding: '5px 11px',
                backgroundColor: 'rgba(255, 255, 255, 0.1)'
              }
            }
          ],
          area: {
            start: 0,
            end: 1
          }
        },
        height: window.innerHeight,
        width: window.innerWidth,
        whitelist: ['']
      });
      player.emit('resourceReady', [{ name: '超清', url: '<?php echo $_GET['url'];?>' }, { name: '高清', url: '<?php echo $_GET['url'];?>' }, { name: '标清', url: '<?php echo $_GET['url'];?>' }]);
    </script>
  </body>
</html>

点播实例代码(m3u8)：

注：西瓜视频原生hls兼容性较差，这里我么调用了原生的hls.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>播放器</title>
    <style type="text/css">
      html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
      body {display:flex;}
      #mse {flex:auto;}
    </style>
    <script type="text/javascript">
      window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});
    </script>
  </head>
  <body>
    <div id="mse"></div>
    <script src="//sf1-ttcdn-tos.pstatp.com/obj/unpkg/xgplayer/2.9.6/browser/index.js" charset="utf-8"></script>
    <script src="//sf1-ttcdn-tos.pstatp.com/obj/unpkg/xgplayer-hls.js/2.2.2/browser/index.js" charset="utf-8"></script>
    <script type="text/javascript">
      new window.HlsJsPlayer({
          id: 'mse',
          url: '<?php echo $_GET['url'];?>',
          poster: "https://cdn.jsdelivr.net/gh/cc963020001/image/30f07120fcc36c44a7e9edd99d9581a5.jpg",
          autoplay: true,
          playsinline: true,
          height: window.innerHeight,
          width: window.innerWidth
      });
    </script>
  </body>
</html>

直播播实例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>xgplayer</title>
    <style type="text/css">
      html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
      body {display:flex;}
      #mse {flex:auto;}
    </style>
  </head>
  <body>
    <div id="mse"></div>
    <script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
      <script src="//cdn.jsdelivr.net/npm/xgplayer-hls.js/browser/index.js" charset="utf-8"></script><script>
      let player = new HlsJsPlayer({
		"id": "mse",
		"url": "<?php echo $_GET['url'];?>",
		"poster": "https://cdn.jsdelivr.net/gh/cc963020001/image/30f07120fcc36c44a7e9edd99d9581a5.jpg",
		"playsinline": true,
		"whitelist": [
				""
		]
      });
      
          </script>
  </body>
</html>

调用说明：

1.建立php文件（如“xigua.php”），复制上述直播或点播实例代码

2.上传服务器后，调用即可，调用代码如下

http(s)://“你的网址”/xigua.php?url=“视频地址”

开源地址：https://github.com/bytedance/xgplayer

1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定，不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益，请联系我们进行处理。