AliyunPlayer_Web
AliyunPlayer_Web copied to clipboard
aliyunvideo
1个页面上多个播放器实例，preload设置成false，调用dispose会导致其他播放器无法播放
1个页面上多个播放器实例，preload设置成false，调用dispose会导致其他播放器无法播放。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.11.0/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="./aliplayer-hls-min.js"></script>
<!-- <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.11.0/aliplayer-min.js" ></script> -->
<script charset="utf-8" type="text/javascript" src="http://127.0.0.1:6064/aliplayer-min.js?d=3343"></script>
<title>Document</title>
</head>
<body>
<div style="width: 480px; height: 270px">
<div id="aliplayer1" style="width: 100%; height: 100%"></div>
</div>
<br />
<br />
<div style="width: 480px; height: 270px">
<div id="aliplayer2" style="width: 100%; height: 100%"></div>
</div>
<button id="play2">播放视频2</button>
<script src="./index.js"></script>
</body>
</html>
var player1 = new Aliplayer(
{
id: "aliplayer1",
preload: false,
source:
"./resource/m3u8/m3u8-hd1b58520437fe49e5b2feebfe560bbeb7/m3u8-hd1b58520437fe49e5b2feebfe560bbeb7.m3u8",
},
function (player) {
console.log("The player1 is created.");
}
);
var player2 = new Aliplayer(
{
id: "aliplayer2",
preload: false,
source:
"./resource/m3u8/m3u8-hd1fc77d5416ba43c68f608676c0301201/m3u8-hd1fc77d5416ba43c68f608676c0301201.m3u8",
},
function (player) {
console.log("The player2 is created.");
// player.dispose();
}
);
document.getElementById("play2").onclick = function () {
// preload设置成false，调用了播放器1的 dispose() 之后，会导致player2也无法播放了
player1.dispose();
// 下面再调用player2的播放就会播放出错。
player2.play();
};
我调试了下，把下面这个代码注释就可以了。 有点不太明白为什么需要这么做，麻烦官方给个解决办法。
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
直接把 player2.play(); 去掉就可以了。 销毁哪个播放器就用哪个播放器去调dispose
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
直接把 player2.play(); 去掉就可以了。 销毁哪个播放器就用哪个播放器去调dispose
player1和player2是不同的组件。 初始状态是player1组件和player2都展现在页面上， 当player1组件销毁的时候，我就会在组件销毁的钩子函数中调用player1.dispose()，然后再调用用player2的播放，就播放出错了。
您看下我上面贴的代码，只有在preload设置成false的时候会出现。
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
直接把 player2.play(); 去掉就可以了。 销毁哪个播放器就用哪个播放器去调dispose
player1销毁之后，player2就无法播放了。。 在调用dispose()之前就已经初始化在页面上的播放器（preload设置为false的），都会无法播放。 应该是改原型链改冲突了。
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
player1和player2是不同的组件。 初始状态是player1组件和player2都展现在页面上， 当player1组件销毁的时候，我就会在组件销毁的钩子函数中调用player1.dispose()，然后再调用用player2的播放，就播放出错了。
您看下我上面贴的代码，只有在preload设置成false的时候会出现。
调player1销毁的时候， player1和player2都是正常播放的。 这个时候，只需要player1.dispose()即可，不需要player2.play()
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
player1销毁之后，player2就无法播放了。。 在调用dispose()之前就已经初始化在页面上的播放器（preload设置为false的），都会无法播放。 应该是改原型链改冲突了。
播放器的继承先不管，你想要的效果就是销毁player1，player2继续播放，不受player1销毁的影响。 就按我上面提供的方法就可以了
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
player1和player2是不同的组件。 初始状态是player1组件和player2都展现在页面上， 当player1组件销毁的时候，我就会在组件销毁的钩子函数中调用player1.dispose()，然后再调用用player2的播放，就播放出错了。 您看下我上面贴的代码，只有在preload设置成false的时候会出现。
调player1销毁的时候， player1和player2都是正常播放的。 这个时候，只需要player1.dispose()即可，不需要player2.play()
那个是我写的demo。我是想描述player1销毁之后，再调用player2的播放就无法播放了。
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
player1销毁之后，player2就无法播放了。。 在调用dispose()之前就已经初始化在页面上的播放器（preload设置为false的），都会无法播放。 应该是改原型链改冲突了。
播放器的继承先不管，你想要的效果就是销毁player1，player2继续播放，不受player1销毁的影响。 就按我上面提供的方法就可以了
大哥有没有什么官方交流群之类的。。。不知道是不是我表述不清楚，，，但是问题是必现的。
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
player1和player2是不同的组件。 初始状态是player1组件和player2都展现在页面上， 当player1组件销毁的时候，我就会在组件销毁的钩子函数中调用player1.dispose()，然后再调用用player2的播放，就播放出错了。 您看下我上面贴的代码，只有在preload设置成false的时候会出现。
调player1销毁的时候， player1和player2都是正常播放的。 这个时候，只需要player1.dispose()即可，不需要player2.play()
那个是我写的demo。我是想描述player1销毁之后，再调用player2的播放就无法播放了。
ok，我明白你的意思了,我们可以从业务层上处理这个问题。
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
player1和player2是不同的组件。 初始状态是player1组件和player2都展现在页面上， 当player1组件销毁的时候，我就会在组件销毁的钩子函数中调用player1.dispose()，然后再调用用player2的播放，就播放出错了。 您看下我上面贴的代码，只有在preload设置成false的时候会出现。
调player1销毁的时候， player1和player2都是正常播放的。 这个时候，只需要player1.dispose()即可，不需要player2.play()
那个是我写的demo。我是想描述player1销毁之后，再调用player2的播放就无法播放了。
ok，我明白你的意思了,我们可以从业务层上处理这个问题。
虽然可以这样，，但是用起来就没那么顺畅了。。 我们其实就是想提前在页面上实例化好，展示好样式，并不是播放的时候才初始化。 既然是独立的实例了 就应该互不影响嘛。。。还是觉得需要处理下。。。
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
player1和player2是不同的组件。 初始状态是player1组件和player2都展现在页面上， 当player1组件销毁的时候，我就会在组件销毁的钩子函数中调用player1.dispose()，然后再调用用player2的播放，就播放出错了。 您看下我上面贴的代码，只有在preload设置成false的时候会出现。
调player1销毁的时候， player1和player2都是正常播放的。 这个时候，只需要player1.dispose()即可，不需要player2.play()
那个是我写的demo。我是想描述player1销毁之后，再调用player2的播放就无法播放了。
ok，我明白你的意思了,我们可以从业务层上处理这个问题。
虽然可以这样，，但是用起来就没那么顺畅了。。 我们其实就是想提前在页面上实例化好，展示好样式，点击播放就直接播放了，并不是播放的时候还要再去重新才初始化。 既然是独立的实例了 就应该互不影响嘛。。。还是觉得需要处理下。。。
你想要的效果是不是点击按钮之后，让player1销毁，player2继续播放
player1和player2是不同的组件。 初始状态是player1组件和player2都展现在页面上， 当player1组件销毁的时候，我就会在组件销毁的钩子函数中调用player1.dispose()，然后再调用用player2的播放，就播放出错了。 您看下我上面贴的代码，只有在preload设置成false的时候会出现。
调player1销毁的时候， player1和player2都是正常播放的。 这个时候，只需要player1.dispose()即可，不需要player2.play()
那个是我写的demo。我是想描述player1销毁之后，再调用player2的播放就无法播放了。
ok，我明白你的意思了,我们可以从业务层上处理这个问题。
虽然可以这样，，但是用起来就没那么顺畅了。。 我们其实就是想提前在页面上实例化好，展示好样式，并不是播放的时候才初始化。 既然是独立的实例了 就应该互不影响嘛。。。还是觉得需要处理下。。。
1.理论上是应该互不影响。这个涉及到播放器的继承，是需要大改的，目前不改。 2.初始化播放器就会拉流，并展示整个播放器的ui，设置autoplay:false，就不会自动播放，需要点击才播放 3.目前就按我上述提供的方法来处理，销毁player1之后，去初始化一遍player2