Как остановить автовоспроизведение?

Я делаю веб-страницу, и я должен включить в нее видео, поэтому я использовал один из pakvim.com. Я использовал их вариант внедрения, и вставил код, который они мне дали. Видо работает отлично, но я не хочу, чтобы видео начинало играть, как только страница загружается. Я уже пытался поставить autoplay = "false" или autoplay = "0", и это не сработало. Как мне это сделать без использования тега vidoe? Я также хочу сделать это, используя только html.Как остановить автовоспроизведение?

<iframe width="560" height="315" src="http://pakvim.com/embed/nCE4UUPxO_s" frameborder="0" allowfullscreen></iframe>

источник

2017-01-07 nfsfjsk876

Если проблема заключается в том, чтобы запускать видеоролик, когда захотите. Как загрузить фрейм в документе по jquery, когда вы хотите запустить свое видео? – Hokusai

Вы загружаете 3 участника состоялся HTML документ в рамку.

Этот документ HTML загружает видео и настраивает его на автовоспроизведение.

У вас нет контроля над этим документом HTML (not even with JS), поэтому у вас нет способа предотвратить автоматическое воспроизведение видео.

источник

2017-01-07 18:07:32 Quentin

Что говорит @Quentin правильно, если только эта служба не имеет API, позволяющего вам получить доступ, как это делает YouTube. Но есть способ, которым вы все еще можете иметь видео и воспроизводить его на своем сайте, когда пользователь нажимает на него.

Сделайте или найдите изображение с размерами iframe (1 # 560x315).
Либо загрузить его на сервер или изображение хоста и заменить URL в IFRAME с URL изображения и дать Iframe в id (2 # id='vid1'.)
Далее создайте DIV и присвойте ему класс (3 # class='overlay') и поместите внутри него <a> nchor.
Назначьте якоря href со значением URL видео (это 4 # href='http://pakvim.com/embed/nCE4UUPxO_s'), а затем присвоить ему атрибут target со значением в IFrame в id (5 # target='vid1.)
Теперь оберните все из узлов в другом div. Этот макет будет работать вместе с предоставленным CSS.
Для краткости я не перечисляю CSS или JS здесь, но имейте в виду, что любое отклонение от упомянутого CSS и/или JS может не гарантировать успех, если вы не знаете, что делает каждый стиль, и что функция JS будет работать - никто не будет работать должным образом без другого. Детали, не перечисленные здесь, прокомментированы в фрагменте.

SNIPPET

// Reference the div.overlay 
 
var overlay = document.querySelector('.overlay'); 
 

 
// When div.overlay is clicked... 
 
overlay.addEventListener('click', function(event) { 
 
    // Assign the clicked node to a var 
 
    var tgt = event.target; 
 
    // Set the CSS display property of tgt to 'none' 
 
    tgt.style.display = 'none'; 
 
}, false);

/* #1 */ 
 
.box, 
 
.overlay { 
 
    width: 560px; 
 
    height: 315px; 
 
    overflow: hidden; 
 
} 
 
.box { 
 
    position: relative; 
 
} 
 
/* This ruleset will place .overlay completely over the iframe */ 
 
/* #3 */ 
 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
} 
 
/* This ruleset will stretch the anchor completely over the .overlay */ 
 

 
a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class='box'> 
 
    <!-- #3 --> 
 
    <div class='overlay'> 
 
    <!-- #4 --><!-- #5 --> 
 
    <a href='http://pakvim.com/embed/nCE4UUPxO_s' target='vid1'></a> 
 
    </div> 
 
    <!-- #2 --> 
 
    <iframe name='vid1' width="560" height="315" src="http://imgh.us/your_logo_here.jpg" frameborder="0" allowfullscreen></iframe> 
 
</div>

ЛИТЕРАТУРЫ

источник

2017-01-07 20:53:55 zer00ne

Как остановить автовоспроизведение?

ответ

Смежные вопросы