首页 > 其他分享 >西瓜视频播放器使用

西瓜视频播放器使用

时间:2023-09-27 10:22:39浏览次数:41  
标签:播放器 视频 西瓜 xgplayer 弹幕 cdn mp4 tos com

官网地址  https://v2.h5player.bytedance.com/gettingStarted/

官方例子:

<!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="//unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js" charset="utf-8"></script>
    <script type="text/javascript">
      let player=new Player({
        id: 'mse',
        autoplay: true,
        volume: 0.3,
        url:'//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
        poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
        playsinline: true,
        thumbnail: {
            pic_num: 44,
            width: 160,
            height: 90,
            col: 10,
            row: 10,
            urls: ['//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg'],
        },
        danmu: {
          comments: [
            {
              duration: 15000,
              id: '1',
              start: 3000,
              txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
              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: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' }, { name: '高清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4' }, { name: '标清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4' }]);
    </script>
  </body>
</html>

  运行:

 

不能使用如下方式预览:会没有效果

 

标签:播放器,视频,西瓜,xgplayer,弹幕,cdn,mp4,tos,com
From: https://www.cnblogs.com/j-a-h/p/17732043.html

相关文章

  • 视频监控\安防视频监控平台EasyCVR的远程控制有什么意义?
    EasyCVR国标视频融合云平台采用端-边-云一体化架构,具备海量视频接入、汇聚与管理、处理及分发等视频能力。该平台部署简单轻量,功能灵活多样。在视频能力方面,它可以实时视频直播、语音对讲、录像回放、云存储等,以实现动火作业现场的在线监测和作业安全预警。此外,还能进行报警联动和......
  • 视频监控/监控汇聚平台EasyCVR助力档案库房可视化管理的应用方案
    档案作为一种特殊的留存记录,具有珍贵的历史价值和文化遗产意义。它是人类活动真实的见证,记录了辉煌时刻和普通人的生活轨迹,对社会发展和经济建设起着举足轻重的作用。如今随着市场经济的不断发展和人类文明的飞速推进,档案的价值更加凸显,档案的储存和管理也备受关注。提升档案数字......
  • 视频融合平台EasyCVR接入华为ivs3800平台提示400报错的原因及解决方法
    青犀视频平台的开源EasyDarwin视频监控解决方案EasyCVR在复杂网络环境中表现出色。它能够将分散的各类视频资源集中管理,实现统一汇聚和整合。EasyCVR支持多种画面窗口播放模式,包括1、4、9、16个画面窗口,同时可以播放多路视频流,并且支持视频定时轮播功能。此外,EasyCVR还兼容多种播......
  • 国标GB28181视频平台EasyCVR调用rtsp地址返回的IP不正确是什么原因?
    EasyCVR是一款安防监控、云存储和磁盘阵列存储的视频汇聚平台,具有强大的可拓展性、灵活的视频能力和轻快的部署特点。它支持主流标准协议,如GB28181、RTSP/Onvif、RTMP等,还能够接入厂家私有协议和SDK,包括海康Ehome、海大宇等设备的SDK。EasyCVR能够将视频流以RTSP、RTMP、FLV、HLS......
  • 以视频监控系统EasyCVR为例介绍安防视频监控系统的含义和特点
    安防视频监控平台EasyCVR是一个具有强大拓展性、灵活的视频能力和轻便部署的平台。它支持多种主流标准协议,包括国标GB28181、RTSP/Onvif、RTMP等,还可以支持厂家的私有协议和SDK接入,例如海康Ehome、海大宇等设备的SDK。该平台不仅拥有传统安防视频监控的功能,还具备接入AI智能分析的......
  • 在物联网兴起的时代背景下视频汇聚平台EasyCVR能在视频融合平台市场中起到什么样的应
    当前,物联网产业正以惊人的速度迅猛发展,在智慧交通、智慧建筑、智慧社区、智能物流、智能电力等领域广泛应用。物联网的快速发展渗透到多元化的消费场景中,为生产和生活创造了更美好的环境,使得生产和生活更加便捷、舒适、安全、节能。基于视频技术的物联网利用AI算法和物联技术深入......
  • 成功实现FaceTime语音,FaceTime视频,FaceTime数据筛选,检测手机号是否开通FaceTime的
    FaceTime是苹果公司iOS和macOS(以前称MacOSX或OSX)内置的一款视频通话软件,通过Wi-Fi或者蜂窝数据接入互联网,在两个装有FaceTime的设备之间实现视频通话。其要求通话双方均具有装有FaceTime的苹果设备,苹果ID以及可接入互联网的3G/4G/5G或者Wi-Fi网络。 一、Windows电脑上部署......
  • 什么是视频剪辑SDK?
    在数字化时代,视频已成为人们生活中不可或缺的一部分。从社交媒体到教育,从娱乐到商业,视频正在以其独特的魅力改变着我们的生活。然而,创作高质量的视频并非易事,这需要专业的剪辑技术和繁琐的操作。为了简化这一过程,美摄视频剪辑SDK应运而生,它是一款专为视频剪辑开发者打造的强大工具......
  • 视频融合平台EasyCVR如何使用视频监控系统搭建森林防火与人车管理系统解决方案
    安防视频监控平台EasyCVR是一个具有强大拓展性、灵活的视频能力和轻便部署的平台。它支持多种主流标准协议,包括国标GB28181、RTSP/Onvif、RTMP等,还可以支持厂家的私有协议和SDK接入,例如海康Ehome、海大宇等设备的SDK。该平台不仅拥有传统安防视频监控的功能,还具备接入AI智能分析的......
  • 视频融合平台EasyCVR如何使用视频监控系统搭建电商货物可视化追溯解决方案
    安防视频监控平台EasyCVR是一个具有强大拓展性、灵活的视频能力和轻便部署的平台。它支持多种主流标准协议,包括国标GB28181、RTSP/Onvif、RTMP等,还可以支持厂家的私有协议和SDK接入,例如海康Ehome、海大宇等设备的SDK。该平台不仅拥有传统安防视频监控的功能,还具备接入AI智能分析的......