西瓜视频HTML5播放器使用实例,支持点播、直播

作者 : admin 本文共4104个字,预计阅读时间需要11分钟 发布时间: 2021-03-29 共77人阅读

西瓜播放器是一个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. 如遇需要解压密码,则解压密码为"www.360mb.net"!
4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
6. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
7. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考退款规则!

360模板吧 » 西瓜视频HTML5播放器使用实例,支持点播、直播

发表评论