|
19.03.2019, 15:45
|
Новичок на форуме
|
|
Регистрация: 03.11.2015
Сообщений: 6
|
|
Youtube start/stop
Добрый день!
Нашел скрипт для запуска и остановки (через долю секунды) встроенного на страницу Youtube-видео.
Цитата:
|
<!-- Youtube start/stop -->
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 't2q2ne3fflA',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 100);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
<!--/Youtube start/stop -->
|
Все работает, но видео приходится встраивать нестандартно:
Цитата:
|
<div id="player"> </div>
|
Как бы изменить скрипт (при этом он очевидно упростится) чтобы это работало для стандартного способа встраивания:
Цитата:
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/t2q2ne3fflA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
Последний раз редактировалось mak200, 19.03.2019 в 16:15.
|
|
20.03.2019, 09:48
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
https://jsfiddle.net/fzu4ct7t/21/
Стоит обратить внимание на
src="https://www.youtube.com/embed/oRSijEW_cDM?enablejsapi=1&origin=https%3A%2F%2Ffid dle.jshell.net"
|
|
26.03.2019, 15:57
|
Новичок на форуме
|
|
Регистрация: 03.11.2015
Сообщений: 6
|
|
Сообщение от MallSerg
|
Стоит обратить внимание на src=...
|
Обратил.
Скажите, пожалуйста, что это такое?
Вы имели в виду, что есть отличие от стандартного кода встраивания?
|
|
26.03.2019, 16:32
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
есть дополнительные параметры
enablejsapi=1
и
origin=https%3A%2F%2Ffid dle.jshell.net
Первый разрешает управление плеером с помощью js api
Второй отвечает за за CORS разрешения
|
|
30.03.2019, 21:18
|
Новичок на форуме
|
|
Регистрация: 03.11.2015
Сообщений: 6
|
|
Странно. Здесь https://jsfiddle.net/fzu4ct7t/21/ все работает.
Но ставлю этот код на сайт, перестает.
И наоборот, ставлю свой (работающий на сайте) код в jsfiddle.net - не работает.
Сравниваю построчно текущий код и ваш.
У вас появляется элемент
g = window;
и функции переписаны иначе.
function onYouTubeIframeAPIReady() {
и
g.onYouTubeIframeAPIReady = function () {
function onPlayerReady(event) {
и
g.onPlayerReady = function(event) {
и т.д.
Последний раз редактировалось mak200, 31.03.2019 в 08:51.
|
|
22.04.2019, 08:20
|
Новичок на форуме
|
|
Регистрация: 03.11.2015
Сообщений: 6
|
|
Скажите, пожалуйста, почему этот код https://jsfiddle.net/5swak436/1/ реальном сайте не работает?
|
|
22.04.2019, 11:02
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от mak200
|
Как бы изменить скрипт (при этом он очевидно упростится) чтобы это работало для стандартного способа встраивания:
|
Можно добавить атрибут data-assign, чтобы указать к какой переменной привязать проигрыватель... а всё остальное автоматизировать!
<iframe data-assign="player" width="560" height="315" src="https://www.youtube.com/embed/oRSijEW_cDM" frameborder="0" allowfullscreen></iframe>
<form>
<input type="button" value="Пауза" onclick="player.pauseVideo()">
<input type="button" value="Продолжить" onclick="player.playVideo()">
</form>
<script src="https://www.youtube.com/iframe_api" async></script>
<script>
const youtubeAPIReady = new Promise(function(resolve) {
window.onYouTubeIframeAPIReady = resolve;
});
for(const player of document.querySelectorAll('iframe[src*="youtube.com"][src*="embed"]')) {
const url = new URL(player.src);
url.searchParams.set("enablejsapi", "1");
player.src = url.href;
youtubeAPIReady.then(function() {
window[player.dataset.assign] = getYouTubePlayer(player);
});
}
function getYouTubePlayer(element) {
return new YT.Player(element, {
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.PLAYING && !done) {
done = true;
}
}
}
</script>
Последний раз редактировалось Malleys, 22.04.2019 в 15:30.
|
|
29.04.2019, 10:02
|
Новичок на форуме
|
|
Регистрация: 03.11.2015
Сообщений: 6
|
|
Malleys,
Очень круто!
|
|
29.04.2019, 14:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Сообщение от mak200
|
сделать обертку
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style type="text/css">
.thumb-wrap{
border: 8px #FFD700 solid;
max-width: 560px;
}
</style>
<iframe data-assign="player" width="560" height="315" src="https://www.youtube.com/embed/x-p_ymteSwo" frameborder="0" allowfullscreen></iframe>
<form>
<input type="button" value="Пауза" onclick="player.pauseVideo()">
<input type="button" value="Продолжить" onclick="player.playVideo()">
</form>
<iframe data-assign="player1" width="560" height="315" src="https://www.youtube.com/embed/NslVg_Wxr_Q" frameborder="0" allowfullscreen></iframe>
<form>
<input type="button" value="Пауза" onclick="player1.pauseVideo()">
<input type="button" value="Продолжить" onclick="player1.playVideo()">
</form>
<script src="https://www.youtube.com/iframe_api" async></script>
<script>
const youtubeAPIReady = new Promise(function(resolve) {
window.onYouTubeIframeAPIReady = resolve;
});
const div = document.createElement('div');
div.className = 'thumb-wrap';
for(const player of document.querySelectorAll('iframe[src*="youtube.com"][src*="embed"]')) {
const clone = div.cloneNode();
player.parentNode.replaceChild(clone, player);
clone.appendChild(player)
const url = new URL(player.src);
url.searchParams.set("enablejsapi", "1");
player.src = url.href;
youtubeAPIReady.then(function() {
window[player.dataset.assign] = getYouTubePlayer(player);
});
}
function getYouTubePlayer(element) {
return new YT.Player(element, {
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.PLAYING && !done) {
done = true;
}
}
}
</script>
</body>
</html>
|
|
|
|