使用youtube api在移动设备上禁用youtube视频播放器
Disable youtube video player on mobile using youtube api
我正在使用YouTube API与此javascript/html代码:
<div class="screen ${sVideo.options.muted ? 'mute' : '' @ context='styleString'}" id="ytbg-${sVideo.id}" data-autoplay="${sVideo.options.autoplay ? 'true' : 'false'}" data-loop="${sVideo.options.loop ? 'true' : 'false'}" data-muted="${sVideo.options.muted ? 'true' : 'false'}" data-videoid="${sVideo.src}"></div>
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var tv,
playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 1, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3, loop: 0};
function onYouTubePlayerAPIReady() {
$("div[id^=ytbg-]").each(function(index, element){
if($(element).data("videoid")) {
var videourl = $(element).data("videoid");
var muted = $(element).data("muted");
var autoplay = $(element).data("autoplay");
var loop = $(element).data("loop");
var id = $(element).attr('id');
playerDefaults.autoplay = autoplay ? 1 : 0;
playerDefaults.loop = loop ? 1 : 0;
if(!tv) {
tv = {};
}
tv[videourl] = {
videoObject: {},
vid: {'videoId': videourl, 'suggestedQuality': 'default'},
mute: muted
};
tv[videourl].videoObject = new YT.Player(id, {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults, width: '100%', height: '100%'});
}
});
}
function onPlayerReady(event) {
if(!tv) return;
var iframe = event.target.getIframe();
var videourl = $(iframe).data("videoid");
if(!tv[videourl]) return;
if(!tv[videourl].videoObject) return;
tv[videourl].videoObject.loadVideoById({videoId: videourl, suggestedQuality:'default'});
if(tv[videourl].mute) {
tv[videourl].videoObject.mute();
}
}
function onPlayerStateChange(e) {
var iframe = e.target.getIframe();
var id = $(iframe).attr('id');
var videourl = $(iframe).data("videoid");
if (e.data === 1) {
$('#' + id).addClass('active');
} else if (e.data === 0){
tv[videourl].videoObject.seekTo(tv[videourl].vid.startSeconds);
}
}
我需要知道的是,当分辨率是移动时,我如何使播放器禁用。是否有一种方法可以禁用播放器并再次启用它?
你可以使用playerVars (object)
,这个对象的属性识别播放器参数,可以用来自定义播放器。
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 600,
height: 400,
videoId: 'Xa0Q0J5tOP0',
playerVars: {
'autoplay': 0,
'autohide': 1,
'modestbranding' : 1,
'rel' : 0
},
events: {
onReady: initialize
}
});
}
要了解更多信息,请查看本教程和相关的SO问题
相关文章:
- 可以't根据设备自动调整youtube播放器的大小
- YouTube播放器API全屏事件
- 如何解决youtube播放器没有显示全宽的问题&身高
- 检测嵌入的 Youtube 播放器字幕
- Win7 IE9 youtube播放器js对象没有任何方法
- 如何将特定 ID 传递给嵌入式 YouTube 播放器
- 如何访问现有的YouTube播放器's连接到IFrame
- 什么'这是鼠标悬停后更改youtube播放器大小的最佳方法
- 在嵌入youtube播放器时收听
- YouTube播放器API onReady未启动www.YouTube-nocookie.com
- 如何添加id和额外的参数到一个放大弹出iframe与youtube视频,所以我可以控制与API youtube播放器
- Youtube播放器iframe嵌入不适用于我的频道
- Youtube播放器API playVideo将api_video_info作为player_204返回
- 多个 YouTube 播放器,位于选项卡式角度 UI 控件中.想要添加折叠
- 如何获取对现有 YouTube 播放器的引用
- 在 Meteor 中加载 youtube 播放器 API
- 非动态插入 YouTube 播放器 iframe 不会触发事件
- 获取YouTube播放器的视频播放
- 在WordPress中的Youtube播放器中包含跳转到特定时间的链接
- YouTube 播放器 API 中没有 onSeekTo 事件