请问这个播放器代码为什么不显示播放器

mx***

<!DOCTYPE html>
<html>
<head>
<title>Web播放器SDK示例</title>
<meta charset="UTF-8">
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js"></script>
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />
</head>
<body>
<div id="player-container"></div>
<input type="text" id="video-url-input" placeholder="输入视频文件的URL">
<button onclick="playVideo()">播放</button>
<script>
var player;
function playVideo() {
var videoUrl = document.getElementById('video-url-input').value;
if (player) {
player.dispose(); // 清除之前的播放器实例
}
player = new Aliplayer({
id: 'player-container',
source: videoUrl,
width: '100%',
height: '100%',
autoplay: true,
language: 'zh-cn', // 设置播放器语言为中文
skinLayout: [
{ name: 'bigPlayButton', align: 'blabs', x: 30, y: 80 },
{ name: 'H5Loading', align: 'cc' },
{ name: 'errorDisplay', align: 'tlabs', x: 0, y: 0 },
{ name: 'infoDisplay' },
{ name: 'tooltip', align: 'blabs', x: 0, y: 56 },
{ name: 'thumbnail' }
],
playsinline: true, // 在iOS Safari中启用内联播放
cover: '<封面图片URL>', // 设置封面图片URL
format: 'auto' // 自动选择播放格式，可选值：'auto'、'm3u8'、'mp4'
});
player.on('ready', function() {
player.play();
});
}
</script>
</body>
</html>

复制代码

打开后只有输入框，没播放器界面，输入视频链接后有声音，还是不显示播放器，修改了几十次都没解决，请问有大佬知道原因吗？

jiusa***

阿里云的播放器

gu***

删除<!DOCTYPE html>试试

jite***

width: '100%',
height: '100%',

使用具体的px。

zxj***

本帖最后由 zxjung 于 2023-9-3 13:50 编辑

<!DOCTYPE html>
<html>
<head>
  <title>阿里云播放器</title>
  <meta charset="UTF-8">
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js"></script>
  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />
</head>
<body>
  <div id="al"></div>
  <script>
var  player = new Aliplayer({
      id: 'al',
      source: 'https://cfss.cc/api/kw/69284035.mp4',
      width: '98%',
      height: '1080px',
      autoplay: true,
      playsinline: true, // 在iOS Safari中启用内联播放
      cover: '<封面图片URL>', // 设置封面图片URL
      format: 'auto' // 自动选择播放格式，可选值：'auto'、'm3u8'、'mp4'
   });
  </script>
</body>
</html>

给你简单化了怎么样OK

mx***

guoma 发表于 2023-9-3 12:37
删除试试

删除了还是不显示

mx***

jiteloozz 发表于 2023-9-3 12:47
width: '100%',
height: '100%',

也不行

mx***

zxjung 发表于 2023-9-3 13:02
播放器

还是不显示呀，你那里可以显示吗？

gu***

是不是你的浏览器问题？

mx***

guoma 发表于 2023-9-3 13:40
是不是你的浏览器问题？

你测试可以吗？我用2个浏览器试了

zxj***

mxwz 发表于 2023-9-3 13:28
还是不显示呀，你那里可以显示吗？

可以的你空间没有HTTPS 吧

EScZk***

mxwz 发表于 2023-9-3 13:45
你测试可以吗？我用2个浏览器试了

把代码里的
<div id="player-container"></div>
改成
<div id="player-container" style="position:absolute;left:10px;top:40px;"></div>
看看。

mx***

zxjung 发表于 2023-9-3 13:53
可以的你空间没有HTTPS 吧

是没有https，只有http

zxj***

zxj***

本帖最后由 zxjung 于 2023-9-3 14:13 编辑

mxwz 发表于 2023-9-3 14:04
是没有https，只有http

复制我的代码在这里测试 https://www.runoob.com/try/try.php?filename=tryhtml_basic_link

没有HTTPS要这样

<!DOCTYPE html>
<html>
<head>
  <title>阿里云播放器</title>
  <meta charset="UTF-8">
  <script charset="utf-8" type="text/javascript" src="//g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js"></script>
  <link rel="stylesheet" href="//g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />
</head>
<body>
  <div id="al"></div>
  <script>
var  player = new Aliplayer({
      id: 'al',
      source: '//cfss.cc/api/kw/69284035.mp4',
      width: '98%',
      height: '1080px',
      autoplay: true,
      playsinline: true, // 在iOS Safari中启用内联播放
      cover: '<封面图片URL>', // 设置封面图片URL
      format: 'auto' // 自动选择播放格式，可选值：'auto'、'm3u8'、'mp4'
   });
  </script>
</body>
</html>

账号		自动登录	找回密码
密码			立即注册

[其它网络视频相关] 请问这个播放器代码为什么不显示播放器

相关帖子

点评

点评

点评

点评

点评

点评

点评

点评

本帖子中包含更多资源

点评

欢迎大家光临恩山无线论坛 /1