youtube - youtube 视频播放按钮不适用于 youtube 嵌入式视频
问题描述
刚刚发现一个新问题,客户说播放按钮在 youtube 嵌入式视频上不起作用。它似乎只在手机上不起作用,我已经在 iphone 和 Sony 手机上测试过它,但在这两种手机上都不起作用,但在计算机上查看网站时起作用。
代码如下
<div class="item active" style="">
<!--<iframe width="100%" src="//www.youtube.com/embed/3a3kT55-fF0?enablejsapi=1&rel=0" frameborder="0" id="video" allowfullscreen></iframe>-->
<iframe width="100%" src="//www.youtube.com/embed/3a3kT55-fF0?enablejsapi=1&rel=0&ps=docs&controls=1" frameborder="0" id="video" allowfullscreen></iframe>
<div class="carousel-caption">
<h4 class=""></h4>
<p class="">
</p>
</div>
</div>
<script>
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
player = new YT.Player('video', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
$("#myCarousel").carousel('pause');
}
else if(event.data == YT.PlayerState.PAUSED){
$("#myCarousel").carousel('cycle');
}
}
function onPlayerReady(event) {
// bind events
$("#myCarousel").on('slide.bs.carousel', function (e){
//alert($(e.relatedTarget).index();
if($(e.relatedTarget).index()!=0 && YT.PlayerState.PLAYING){
//alert('A new slide is about to be shown!');
player.pauseVideo();
}
});
}
</script>
解决方案
推荐阅读
- html - 使用带有“行环绕”和网格间隙的 Angular Flex 时移除底部的多余空间
- c# - C# - 列出 Active Directory 中的所有用户帐户时出错
- php - Azure 应用服务 PHP Laravel CSS 未加载
- python - 将字符串列表转换为整数
- logging - 使用 logOnNext 使用 Reactor 记录 MDC
- google-sheets - 获取当前工作表中填写的最后一行值
- laravel - Laravel 雄辩的关系有很多关节
- javascript - 如何使用 React JS 以 BYTE ARRAY 格式将图像上传到 ASP.NET CORE WEB API,400 错误请求
- r - 如何排除 dplyr 范围内的值?
- angular - 将任何语言环境日期转换为 en-US 语言环境日期字符串