西瓜视频播放器使用
官网地址 https://v2.h5player.bytedance.com/gettingStarted/
官方例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!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> |
运行:
不能使用如下方式预览:会没有效果
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2022-09-27 jquery 判断图片是否存在