Я знаю, что к этому есть похожие вопросы, но я не смог заставить его работать.
Этот код показывает видео YouTube, который находится в пределах iframe. Когда нажата кнопка (emsbinstartbutton), видео скрывается и заменяется заполнителем. Если этот держатель места (threebytwo) закрыт, видео должно появиться снова.
В настоящий момент это работает отлично, за исключением того, что когда видео скрыто, оно будет продолжать воспроизводиться (вы можете услышать звук, и когда вы вернетесь, вы увидите, что он все еще играет). При скрытии видео следует остановить.
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Widget.Master" Inherits="System.Web.Mvc.ViewPage<WidgetView>" %>
<%@ Import Namespace="WidgetData" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
<%= Html.WidgetTitle(Model) %>
</asp:Content>
<asp:Content ID="WidgetStyle" ContentPlaceHolderID="StyleContent" runat="server">
<%= Html.WidgetStyle(Model) %>
<%= Html.WidgetScripts(Model) %>
<script type="text/javascript">
// when they click on the buy now button we will hide the title and show the widget
//detach work to stop vid but can t get it back.....
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$("#divbuyonlineVid").hide();
$(".divbuyonlineVid").hide();
$("#threebytwo").show();
});
});
// when they click on the x the widget should be hidden and the video shows again
$(document).ready(function () {
$("#closebtn").click(function () {
$("#divbuyonlineVid").show();
$(".divbuyonlineVid").show();
$("#threebytwo").hide();
});
});
</script>
<!-- playing with additional CSS needed to get the page behaving the way I want Will move this into the widget style once proven -->
<style type="text/css">
#threebytwo
{
display: none;
}
#emsbin2startbutton
{
cursor: pointer;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="divbuyonlineVid">
<!-- IMPORTANT the youtube video has to include &wmode=opaque at the end of the link so that the buynow button is above the video -->
<img class="emsbinstarttext" id="emsbinstarttext" src="http://static.e-talemedia.net/content/images/DoveYoutubeMessage.png" />
<img class="emsbinstartbutton" id="emsbinstartbutton" src="http://static.e-talemedia.net/content/images/DoveYoutubeBuyNowRed.png" />
alt="" />
<div class="divVidContainer">
<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/AvywK19yVEk?feature=player_embedded&wmode=opaque&enablejsapi=1"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="threebytwo" class="threebytwo">
<img class="closebtn" id="closebtn" src="http://static.e-talemedia.net/content/images/DoveYoutubeExit.png" />
<div class="threebytwomiddle">
<ul>
<% if (Model.ProductNotFound)
{ %>
<!-- List the retailers as we have none in stock -->
<%= Html.WidgetProductNotFoundList(Model) %>
<% }
else
{ %>
<%= Html.WidgetProductFoundList(Model) %>
<% } %>
</ul>
</div>
</div>
<%= Html.WidgetImpressionCode2(Model) %>
<%= Html.WidgetTrackingCode(Model) %>
</asp:Content>
Я пробовал следующее:
// when they click on the buy now button we will hide the title and show the widget
//detach work to stop vid but can t get it back.....
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$holdera = $("#divbuyonlineVid").detach();
$holderb = $(".divbuyonlineVid").detach();
$("#threebytwo").show();
});
});
// when they click on the x the widget should be hidden and the video shows again
$(document).ready(function () {
$("#closebtn").click(function () {
$("#threebytwo").hide();
alert($holdera);
$("#divbuyonlineVid").append($holdera);
alert($holderb);
$(".divbuyonlineVid").append($holderb);
});
});
Несмотря на то, что видео останавливается при нажатии, когда я пытаюсь вернуться (добавление), я получаю сообщение об ошибке объекта.
Итак, в iframe добавив &enablejsapi=1:
<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/AvywK19yVEk?feature=player_embedded&wmode=opaque&enablejsapi=1"
frameborder="0" allowfullscreen></iframe>
и в jQuery:
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$holdera = $("#divbuyonlineVid").hide();
$holderb = $(".divbuyonlineVid").hide();
$("#player").stop();
$("#threebytwo").show();
});
});
Что ничего не меняет. А также:
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$("#divbuyonlineVid").hide();
$(".divbuyonlineVid").hide();
$("#player").stopvideo();
$("#threebytwo").show();
});
});
При нажатии кнопки вы все равно можете слышать звук, но три раза не показывают.
Я также добавил это <script>:
<script type="text/javascript" src="http://www.youtube.com/player_api" ></script>
Может ли кто-нибудь указать мне в правильном направлении или посмотреть, где я ошибаюсь?
Изменить: shabeer90 описывает, как остановить видео с YouTube, которое заставило меня на моем пути, но если вы просто хотели приостановить его и сохранить в фоновом режиме, может оказаться полезным следующий код:
JQuery
<script type="text/javascript">
$(document).ready(function () {
var obj = $('object')
.wrap('<div id="test"></div>')
.find('embed').attr('src', function (i, s) { return s + '&enablejsapi=1&version=3' }).end()
.find('param[name=movie]').attr('value', function (i, v) { return v + '&enablejsapi=1&version=3' }).end()
.detach()
.appendTo($('#test'));
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
//Then assign the src to null, this then stops the video been playing
obj.find('embed')[0].pauseVideo();
$("body").append($("<div>").css({
position: "fixed"
, width: "640px"
, height: "425px"
, "background-color": "#000"
, opacity: 0.6
, "z-index": 999
, top: 0
, left: 0
}).attr("id", "page-cover"));
$("#threebytwo").show();
});
});
// when they click on the x the widget should be hidden and the video shows again
$(document).ready(function () {
$("#closebtn").click(function () {
// $("#divbuyonlineVid").show();
// $(".divbuyonlineVid").show();
$("#threebytwo").hide();
$("#page-cover").detach();
});
});
});
</script>
HTML:
<div class="divbuyonlineVid">
<img class="emsbinstarttext" id="emsbinstarttext" src="http://static.e-talemedia.net/content/images/DoveYoutubeMessage.png" />
<img class="emsbinstartbutton" id="emsbinstartbutton" src="http://static.e-talemedia.net/content/images/DoveYoutubeBuyNowRed.png"
alt="" />
<div class="divVidContainer">
<object width="640" height="385">
<%--IMPORTANT - the embed video format has to change so that it is exactly like below with the /v/ and &hl=en_US&fs=1 and &wmode=opaque for the mask--%>
<param name="movie" value="http://www.youtube.com/v/fBZTbCrM2eQ&hl=en_US&fs=1&wmode=opaque ">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/fBZTbCrM2eQ&hl=en_US&fs=1&wmode=opaque"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
width="640" height="385" wmode="Opaque"></embed>
</object>
</div>
</div>
Большое спасибо.
Вам нужно reset ссылку на видео, у меня была аналогичная проблема, вот как я ее решил, я использовал jQuery в этом процессе.
//First get the iframe URL
var url = $('#YourIFrameID').attr('src');
//Then assign the src to null, this then stops the video been playing
$('#YourIFrameID').attr('src', '');
// Finally you reasign the URL back to your iframe, so when you hide and load it again you still have the link
$('#YourIFrameID').attr('src', url);
Отметьте ответ
Нужно просто изменить значение источника (src) тега iframe. Это так просто!:)
С помощью javascript вы можете сделать это следующим образом:
var stopButton = document.getElementById('video-close-button-id');
stopButton.onclick = function() {
var myPlayer = document.getElementById("youtube-player-id");
myPlayer.setAttribute("src", " ");
};
Счастливое кодирование.
//в HTML
<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
<div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
//в apps.js
function destroyVideo(){
var url = $('#youtubePlayer').attr('src');
$('#youtubePlayer').attr('src', '');
$('#youtubePlayer').attr('src', url);
}
//Эта работа для Foundation 6.2