-2
JavaScriptで常に変化しているテキストを人々に喚起しようとしているウェブサイトに取り組んでいます。このテキストの中に表示されている行の1つに、モーダルビデオと思われるビデオへのリンクが含まれていますが、このjavascriptの外にある他のビデオは正常に動作していますが、 Hereは問題のビデオです。JavaScriptまたはjQueryがJavaScript内で動作しない
ここではうまくいきません。それはCSSかjQueryですか？
<!doctype HTML>
<html lang="en-US">
<head>
<!-- load latest jQuery 3.1.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.modal.fade.in {
top: 20%;
}
.fade.in {
opacity: 1;
}
.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -25%;
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.hide {
display: none;
}
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: 1050;
width: 560px;
margin-left: -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
margin-top: 10px;
margin-bottom: 10px;
overflow-y: hidden;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header .close {
margin-top: 2px;
}
.close {
float: right;
font-weight: bold;
line-height: 20px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
font-size: 45px;
height: 50px;
cursor: pointer;
}
.modal-body {
position: relative;
max-height: 80%;
overflow-y: visible;
padding: 5px;
margin-bottom: -4px;
}
.modal-body.modal-body-video iframe {
height: 400px;
width: 100%;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-header .link {
white-space: normal;
margin-left: 5px;
}
@media (max-width: 767px) {
.modal.fade.in {
top: 20px;
}
.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
margin: 0;
}
}
@media (max-width: 480px) {
.modal {
top: 10px;
left: 10px;
right: 10px;
}
}
body{
margin: 0;
padding-left: 10%;
padding-right: 10%;
padding-top: 2%;
padding-bottom: 1%;
}
#moto{
margin-top: -20px;
font-size: 1.7vw;
text-align: center;
height: 5vw;
opacity: 0.8;
}
.boxspace {
overflow: hidden;
}
.box {
float: left;
position: relative;
width: 16.6666%;
padding-bottom: 16.6666%;
}
.boxInner {
position: absolute;
left: 2%;
right: 2%;
top: 2%;
bottom: 2%;
overflow: hidden;
border: thin solid #969696;
border-radius: 4%;
}
.boxInner .titleBox {
position: absolute;
/*no top border*/
bottom: 0;
left: 0;
right: 0;
/*we push the square down*/
margin-bottom: -20%;
background: #000000;
background: rgba(0, 0, 0, 0.8);
color: #FFFFFF;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 2%;
padding-right: 2%;
text-align: center;
font-size: 1.2vw;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.boxInner .titleBox header{
color: #FFFFFF;
font-size: 1.4vw;
}
.boxInner .titleBox p{
color: #FFFFFF;
font-size: 1.0vw;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 0px;
}
</style>
<!--VIDEO-scripts-->
<script type="text/javascript">
/// <reference path="../jquery.min.js" />
//force strict mode
"use strict";
/* Modal Video pluggin.
* currently handles videos in mp4 using html5 native controls && youtube videos
* currently handles modal click events
*/
//scope safe constructor
function ModalVideoOptions(callbackOnModalOpenClick) {
if (this instanceof ModalVideoOptions) {
this.callbackOnModalOpenClick = callbackOnModalOpenClick;
this._videoType = undefined;
//we freeze the object if possible
if (Object.freeze)
Object.freeze(this.VideoEnum);
}
else {
return new ModalVideoOptions(callbackOnModalOpenClick);
}
}
ModalVideoOptions.prototype = {
constructor: ModalVideoOptions,
//getters and setters for videoType
getVideoType : function() {
return this._videoType;
},
setVideoType : function (value) {
if (typeof value != "number") {
throw new Error('Invalid argument: value. This argument must be a number.');
}
var videoTypeItem;
//loop in the enum properties
for(videoTypeItem in this.VideoEnum) {
var enumValue = this.VideoEnum[videoTypeItem];
if (value == enumValue) {
this._videoType = enumValue;
}
}
if (this._videoType == undefined)
throw new Error('Invalid argument: value. This argument must be in the range of VideoEnum.');
},
//enum
VideoEnum : {
MP4: 0,
YOUTUBE: 1
}
};
/**
* JavaScript function to match (and return) the video Id
* of any valid Youtube Url, given as input string.
* @author: Stephan Schmitz <[email protected]>
* @url: http://stackoverflow.com/a/10315969/624466
*/
function ytVidId(url) {
var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
return (url.match(p)) ? RegExp.$1 : false;
}
(function ($) {
function showModal(options) {
//mask doesn't exist
if ($('#mask').length == 0) {
//we create it
$('body').prepend("<div id='mask' class='modal-backdrop fade in'></div>");
}
var dialogContainer = $('#dialog-container-video');
//popup not created yet
if (dialogContainer.length == 0) {
//we create it
var dialogContainer = $("<div id='dialog-container-video' class='modal fade in'></div>");
$('body').prepend(dialogContainer);
}
var dialogContent;
if (options.getVideoType() == options.VideoEnum.MP4)
dialogContent = "<div id='dialog-content' class='modal-body'><video width='100%' src='" + options.link + "' controls></video></div>";
else if (options.getVideoType() == options.VideoEnum.YOUTUBE)
dialogContent = "<div id='dialog-content' class='modal-body modal-body-video'><iframe src='https://www.youtube.com/embed/" + options.youtubeId + "' frameborder='0' allowfullscreen></iframe></div>";
if(dialogContent)
dialogContainer.append(dialogContent);
//transition effect
$('#mask').show();
$("#dialog-container-video").show();
//modal only must be visible, so we hide the scrollbars
$('body').css('overflow', 'hidden');
//add here transition effect to hide the modal window
var closePopup = function() {
$('#mask').hide();
$('#dialog-container-video').hide();
//we unbind at the closing of the modal window
$("#mask").unbind("click", closePopup);
$('#dialog-container-video a.close').unbind("click", closePopup);
$(document).unbind("keyup", escKeyClosePopup);
$('#dialog-content').remove();
//we display the scrollbars again if needed
$('body').css('overflow', 'auto');
};
$('#mask').on("click", closePopup);
$('#dialog-container-video a.close').on("click", closePopup);
var escKeyClosePopup = function (e) {
//escape key
if (e.keyCode == 27) {
closePopup();
}
};
$(document).keyup(escKeyClosePopup);
}
$.fn.modalvideo = function (options) {
if ((options instanceof ModalVideoOptions) == false)
throw new Error('Invalid argument: options. This argument must be an instance of ModalVideoOptions.');
//force strong-typed object
if (!options || $.isEmptyObject(options)) {
options = new ModalVideoOptions();
}
//every link the selector found
$(this).each(function (i) {
//get the url of the link
var link = $(this).prop("href");
//no href property ? we leave
if (typeof link == "undefined") {
return true;
}
var youtubeId = ytVidId(link);
//youtube id detected
if (youtubeId != false) {
//console.log('youtube ID : ' + youtubeId);
options.setVideoType(options.VideoEnum.YOUTUBE);
options.youtubeId = youtubeId;
}
//test if the link ends with '.mp4'
else if (link.indexOf('.mp4', link.length - '.mp4'.length) != -1) {
options.setVideoType(options.VideoEnum.MP4);
}
//no mp4 or youtube video, continue to the next link
else
return true;
options.link = typeof options.link == "undefined" ? link : options.link;
//binding to the click event. This will cancel the trigger('click') event.
$(this).click(function (e) {
e.preventDefault();
showModal(options);
//open modal event
if (typeof options.callbackOnModalOpenClick == "function") {
options.callbackOnModalOpenClick();
}
});
});
}
})(jQuery);
</script>
<script type="text/javascript"">
"use strict";
\t \t $(document).ready(function() {
\t \t
\t \t \t //each video has need its own instance of modalVideoOptions
\t \t \t $('a[href]').each(function(){
\t \t \t \t $(this).modalvideo(new ModalVideoOptions());
\t \t \t });
\t \t });
</script>
<script type="text/javascript"">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="no-touch">
<div id="moto"></div>
<script type="text/javascript">
var text = ["Line 1",'Line 2 and nonworking <a href="./video/test.mp4">video</a>.'];
var counter = 0;
var elem = document.getElementById("moto");
ChangeFunction();
setInterval(ChangeFunction, 3000);
function ChangeFunction() {
var moto = text[counter++];
$(elem).fadeOut('slow', function() {
$(elem).html(moto);
$(elem).fadeIn('slow');
});
if(counter >= text.length) { counter = 0; }
}
</script>
<div class="boxspace">
<div class="box">
<div class="boxInner">
<div class="titleBox">
<header>
Header title
</header>
<a href="./video/test.mp4">video</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
コンソールですべてのエラーを取得するのですか？ – Tinsten
問題を再現する[スニペット]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）を作成できますか？ –
@Mosh Feu Okこのスニペットは現在動作しています。フルスクリーンで試してみてください - 問題は現時点では見つからないローカルのmp4ビデオでしかありませんが、javascript内のビデオはモーダルウィンドウとして表示されません。 なぜ私は近くの投票を得たのかわかりません。私は問題、コード、今のスニペットのビデオを投稿しました... – 71GA