【发布时间】：2019-10-18 06:37:15
【问题描述】：
我正在尝试在页面加载时启动 DZ 播放器，它会直接播放我的流程。
我可以使用DZ.player.playTracks() 启动播放器、登录、将曲目加载到播放器，但它实际上并没有开始播放歌曲（应该如此）。
DZ.player.isPlaying() 在调用DZ.player.playTracks() 之后是undefined。
我需要手动单击一次播放按钮（Deezer 加载的小部件中的那个），然后才能使用DZ.player.play()、DZ.player.pause() 或DZ.player.playTracks() 方法。
我的最终目的是使用隐藏播放器，所以我无法点击那个小部件按钮。
我在控制台中有一些类似这样的错误（不确定是否相关）：
内容安全策略指令“upgrade-insecure-requests”在仅报告策略中被忽略。
内容安全策略指令“upgrade-insecure-requests”在仅报告策略中被忽略。 player.php?channel=http://localhost:8080/dz-custom/channel.html&app_id=1234XXXX&emptyPlayer=true:1
编辑：这是我从 (player_invisible.html) 使用的代码
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://e-cdns-files.dzcdn.net/js/min/dz.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js" integrity="sha256-oE03O+I6Pzff4fiMqwEGHbdfcW7a3GRRxlL+U49L5sA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js" integrity="sha256-oE03O+I6Pzff4fiMqwEGHbdfcW7a3GRRxlL+U49L5sA=" crossorigin="anonymous"></script>
<script src="/dz-custom/tools.js"></script>
<style type="text/css">
.progressbarplay {
cursor:pointer;overflow: hidden;height: 8px;margin-bottom: 8px;background-color: #F7F7F7;background-image: -moz-linear-gradient(top,whiteSmoke,#F9F9F9);background-image: -ms-linear-gradient(top,whiteSmoke,#F9F9F9);background-image: -webkit-gradient(linear,0 0,0 100%,from(whiteSmoke),to(#F9F9F9));background-image: -webkit-linear-gradient(top,whiteSmoke,#F9F9F9);background-image: -o-linear-gradient(top,whiteSmoke,#F9F9F9);background-image: linear-gradient(top,whiteSmoke,#F9F9F9);background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5',endColorstr='#f9f9f9',GradientType=0);-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
}
.progressbarplay .bar {
cursor:pointer;background: #4496C6;width: 0;height: 8px;color: white;font-size: 12px;text-align: center;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: width .6s ease;-moz-transition: width .6s ease;-ms-transition: width .6s ease;-o-transition: width .6s ease;transition: width .6s ease;
}
</style>
</head>
<body>
<div id="dz-root"></div>
<div id="controlers">
<input type="button" onclick="DZ.player.playAlbum(302127); return false;" value="Play Daft Punk - Discovery"/>
<input type="button" onclick="DZ.player.playAlbum(301775); return false;" value="Play Daft Punk - Homework"/>
<br/>
<input type="button" onclick="DZ.player.play(); return false;" value="play"/>
<input type="button" onclick="DZ.player.pause(); return false;" value="pause"/>
<input type="button" onclick="DZ.player.prev(); return false;" value="prev"/>
<input type="button" onclick="DZ.player.next(); return false;" value="next"/>
<br/>
<input type="button" onclick="DZ.player.setVolume(20); return false;" value="set Volume 20"/>
<input type="button" onclick="DZ.player.setVolume(80); return false;" value="set Volume 80"/>
<br/><br/><br/>
</div>
<div id="slider_seek" class="progressbarplay" style="">
<div class="bar" style="width: 0%;"></div>
</div>
<script>
$(document).ready(function(){
$("#controlers input").attr('disabled', true);
$("#slider_seek").click(function(evt,arg){
var left = evt.offsetX;
console.log(evt.offsetX, $(this).width(), evt.offsetX/$(this).width());
DZ.player.seek((evt.offsetX/$(this).width()) * 100);
});
});
function event_listener_append() {
var pre = document.getElementById('event_listener');
var line = [];
for (var i = 0; i < arguments.length; i++) {
line.push(arguments[i]);
}
pre.innerHTML += line.join(' ') + "\n";
}
//get token
var utoken = Cookies.get('utoken');
console.log(utoken);
function onPlayerLoaded() {
$("#controlers input").attr('disabled', false);
event_listener_append('player_loaded');
DZ.Event.subscribe('current_track', function(arg){
event_listener_append('current_track', arg.index, arg.track.title, arg.track.album.title);
});
DZ.Event.subscribe('player_position', function(arg){
event_listener_append('position', arg[0], arg[1]);
$("#slider_seek").find('.bar').css('width', (100*arg[0]/arg[1]) + '%');
});
DZ.Event.subscribe('track_end', function() {
event_listener_append('track_end');
});
}
function login() {
DZ.login(function (response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
DZ.api('/user/me', function (response) {
console.log('Good to see you, ' + response.name + '.');
});
utoken = response.authResponse.accessToken;
Cookies.set('utoken', utoken)
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, { perms: 'email, manage_library,offline_access' });
};
document.addEventListener('DOMContentLoaded', function() {
DZ.init({
appId : 'MY_APP_ID',
channelUrl : 'http://localhost:8080/dz-custom/channel.html',
player : {
onload : onPlayerLoaded
}
});
DZ.ready(function(sdk_options){
if(!utoken || utoken== "null") {
console.log('not logged');
login();
} else {
console.log("player ready");
DZflow('start');
}
});
});
function DZflow(fn){
DZ.api('/user/MY_USER_ID/flow', 'GET',{access_token: utoken},function (response) {
console.log(response);
playMode = "flow";
trackArr = response.data;
var trackIds = trackArr.map(obj => {
var rObj = [];
rObj.push(obj['id']);
return rObj;
});
switch(fn){
case 'start':
console.log('Starting flow');
DZ.player.playTracks(trackIds);
break;
case 'add':
console.log('Adding songs to flow');
DZ.player.addToQueue(trackIds);
break;
default:
DZ.player.playTracks(trackIds);
console.log('unknown DZflow fn',fn)
}
}
);
}
</script><br/>
event_listener : <br/>
<pre id="event_listener" style="height:100px;overflow:auto;"></pre>
</body>
</html>有人遇到过这个问题吗？我在播放器的初始化过程中遗漏了什么吗？
【问题讨论】：
-
你可以在这里使用stackoverflow分享你的代码sn-p功能
-
@ChickenSoups，你知道我应该根据这段代码寻找什么吗？
-
我无法运行你的sn-p，如果你能提供一个可运行的sn-p或使用第三方网站如plunk或jsfildler会更容易
-
遇到同样的问题。我发现它只发生在不可见的播放器中，并且只发生在 chrome 中。所以最可能的原因是最近对跨域资源的自动播放限制。仍在尝试找到解决方法。
标签： javascript sdk localhost deezer