作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我制作了一个网站,可以通过数据库中的 id 加载视频。我正在使用 YoutubeAPI 嵌入播放器,但在 IE 播放器中有时无法加载。这是脚本。
<script>
var player;
var player_width = $(window).width() - 100;
var player_height = $(window).height() - 50;
$('.prev-next').height(player_height);
$('.prev-next-but').height(player_height);
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
width: player_width,
height: player_height,
videoId: '<?php echo $yt_id; ?>',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if(event.data === 0) {
document.forms["not_skipped"].submit();
}
}
当我使用简单的 iframe 时,我没有这个问题,但我不知道如何在视频结束时以这种方式触发事件。
最佳答案
首先,检查您用于加载播放器 API 库的方法。如果您使用脚本标记,则脚本很可能会在定义 onYouTubePlayerAPIReady
函数之前加载,因此不会触发任何内容。为了避免这种竞争情况,您需要像这样加载库:
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var player_width = $(window).width() - 100;
var player_height = $(window).height() - 50;
$('.prev-next').height(player_height);
$('.prev-next-but').height(player_height);
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
width: player_width,
height: player_height,
videoId: '<?php echo $yt_id; ?>',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if(event.data === 0) {
document.forms["not_skipped"].submit();
}
}
</script>
现在,关于您提到的另一件事——将播放器 API 挂接到现有的 iframe 中相当简单;您只需将 iframe 的 ID 传递到 YT.Player
构造函数中,而不需要为其提供宽度、高度或视频 id,如下所示:
<iframe id="myplayer" width="560" height="315" src="//www.youtube.com/embed/0kl3VNy0uAI?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('myplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if(event.data === 0) {
document.forms["not_skipped"].submit();
}
}
</script>
请注意,我们仍在动态加载播放器库,以避免竞争条件。
关于javascript - Youtube API 视频有时无法在 IE 11 中加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25379746/
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是,它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
我只是无法弄清楚这一点,也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录,并在我的网页上以每个面板 12 条的倍数显示它们。因此,我需要知道有多少个面板可以使用 JavaScrip
我是一名优秀的程序员,十分优秀!