YouTube作为弹出窗口在桌面版本上播放,但不在移动设备上播放
YouTube as popup play on desktop version but not on mobile devices
我使用以下脚本作为引导模式播放YouTube视频,它在桌面版本上播放视频,但在iphone和iPad等移动设备上无法播放。
YouTubeLoader.js
// Load & insert into DOM Youtube iframe_api
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* Create Player */
var player;
function onYouTubeIframeAPIReady() {
console.log('Api Loaded');
}
$(".youtubeVideoLoader").each(function() {
// Set the BG image from the youtube ID
$(this).css('background-image', 'url(//i.ytimg.com/vi/' + this.id + '/hqdefault.jpg)');
// Click the video div
$(document).delegate('#' + this.id, 'click', function() {
// Vemos le id del video
console.log(this.id);
// Create new instance of player
player = new YT.Player('videoModalContainer', {
videoId: this.id,
events: {
'onReady': OpenModal,
'onStateChange': console.log('Changed')
}
});
// Show Modal
function OpenModal() {
$("#youtubeModal").modal({backdrop: "static"});
// Set Highres
player.setPlaybackQuality('highres');
// Play Video
player.playVideo();
};
});// /click
}); // /each video
// Add a Lisener to Modal CLose Button
$('#CloseModalButton').click(function(){
console.log('Stop Preset');
player.destroy();
});
HTML
<div id="3WCMCeS7Na4" class="youtubeVideoLoader">
</div>
<!-- Modal Template -->
<div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-footer">
<button id="CloseModalButton" type="button" class="btn btn-default" data-dismiss="modal">X</button>
</div>
<div class="modal-content">
<div class="modal-body">
<div id="videoModalContainer">
</div>
</div>
我已经在其他视频中尝试过,我面临着与我最初认为的相同的问题,可能是一个由于权限
通过删除以下两行代码解决了问题。
//player.setPlaybackQuality('highres');
//player.playVideo();
它没有在移动设备上播放,因为Youtube已经停止了视频的自动播放功能。不确定为什么它适用于桌面版本。。。
相关文章:
- YouTube作为弹出窗口在桌面版本上播放,但不在移动设备上播放
- 如何减少在移动网络应用程序上播放声音的延迟
- 在移动设备中自动播放视频
- html视频javascript播放方法在移动Safari中不起作用
- 苹果/野生动物园在移动设备上播放背景视频时出现问题
- HTML5音频播放器只有在双击后才能在移动浏览器上播放
- 检测iOS移动设备的JavaScript比自动播放音频
- 移动设备的动态视口始终包含固定尺寸的视频播放器
- 当我点击“如何使滑块按百分比移动”时;播放“;
- 视频未在任何具有ios和Android版本的移动设备上播放,但在网页上播放
- 整页.js - 在背景视频循环播放时向右移动幻灯片
- iPhone应用程序或移动野生动物园的动画PNG文件的替代方案,目标是模拟短视频剪辑的即时播放
- 如何重新绘制背景,使其看起来像我的“播放器”在html5-canvas中移动
- HTML <音频>标签的播放功能无法在移动设备上触发
- HTML5 视频无法在移动设备中播放
- 如何在移动设备上更改HTML5视频的播放速度
- Mixcloud Player 自动播放在移动设备上不起作用
- 音频对象未在移动设备的回调中播放
- 移动版 Chrome 上的 IFrame 播放器 API
- Jplayer不会在移动设备上自动开始播放