HTML Video with Javascript
Would like to find a way to work around this.
Currently do have modal block which is formed by JavaScript, all style elements present in css file. Modal appears only after click on item, JS takes reference and files path from original HTML and places them in modal created inside JS code.
Question is, how and which way to change from image to video file, to keep it same wait that JS gets and process all the information?
JS suppose to take only path to file and form video tags, like with image.
Reference of code and issues.
HTML Code
<dt><a href="#" class="rm-viewdetails" data-thumb="images/13.jpg">Gourmet Yam Taohu</a></dt>
<dd>Thai tofu salad yam taohu</dd>
JS CODE
viewDetails = function( recipe ) {
var title = recipe.text(),
img = recipe.data( 'thumb' ),
description = recipe.parent().next().text(),
url = recipe.attr( 'href' );
var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );
$modal.appendTo( $container );
var h = $modal.outerHeight( true );
$modal.css( 'margin-top', -h / 2 );
setTimeout( function() {
$container.addClass( 'rm-in rm-nodelay' );
$modal.find( 'span.rm-close-modal' ).on( 'click', function() {
$container.removeClass( 'rm-in' );
} );
}, 0 );
};
javascript html video modal-dialog
asked Jan 20 at 15:15
zigzig
11
add a comment |
Would like to find a way to work around this.
Currently do have modal block which is formed by JavaScript, all style elements present in css file. Modal appears only after click on item, JS takes reference and files path from original HTML and places them in modal created inside JS code.
Question is, how and which way to change from image to video file, to keep it same wait that JS gets and process all the information?
JS suppose to take only path to file and form video tags, like with image.
Reference of code and issues.
HTML Code
<dt><a href="#" class="rm-viewdetails" data-thumb="images/13.jpg">Gourmet Yam Taohu</a></dt>
<dd>Thai tofu salad yam taohu</dd>
JS CODE
viewDetails = function( recipe ) {
var title = recipe.text(),
img = recipe.data( 'thumb' ),
description = recipe.parent().next().text(),
url = recipe.attr( 'href' );
var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );
$modal.appendTo( $container );
var h = $modal.outerHeight( true );
$modal.css( 'margin-top', -h / 2 );
setTimeout( function() {
$container.addClass( 'rm-in rm-nodelay' );
$modal.find( 'span.rm-close-modal' ).on( 'click', function() {
$container.removeClass( 'rm-in' );
} );
}, 0 );
};
javascript html video modal-dialog
asked Jan 20 at 15:15
zigzig
11
can't find the code for the video, if you can add those will be able to help you.
– Anoop Mc
Jan 20 at 19:00
Here for the same, don't know how to put with JS, but should be kept in a modal.
– zig
Jan 21 at 2:07
add a comment |
Would like to find a way to work around this.
Currently do have modal block which is formed by JavaScript, all style elements present in css file. Modal appears only after click on item, JS takes reference and files path from original HTML and places them in modal created inside JS code.
Question is, how and which way to change from image to video file, to keep it same wait that JS gets and process all the information?
JS suppose to take only path to file and form video tags, like with image.
Reference of code and issues.
HTML Code
<dt><a href="#" class="rm-viewdetails" data-thumb="images/13.jpg">Gourmet Yam Taohu</a></dt>
<dd>Thai tofu salad yam taohu</dd>
JS CODE
viewDetails = function( recipe ) {
var title = recipe.text(),
img = recipe.data( 'thumb' ),
description = recipe.parent().next().text(),
url = recipe.attr( 'href' );
var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );
$modal.appendTo( $container );
var h = $modal.outerHeight( true );
$modal.css( 'margin-top', -h / 2 );
setTimeout( function() {
$container.addClass( 'rm-in rm-nodelay' );
$modal.find( 'span.rm-close-modal' ).on( 'click', function() {
$container.removeClass( 'rm-in' );
} );
}, 0 );
};
javascript html video modal-dialog
asked Jan 20 at 15:15
zigzig
11
Would like to find a way to work around this.
Currently do have modal block which is formed by JavaScript, all style elements present in css file. Modal appears only after click on item, JS takes reference and files path from original HTML and places them in modal created inside JS code.
Question is, how and which way to change from image to video file, to keep it same wait that JS gets and process all the information?
JS suppose to take only path to file and form video tags, like with image.
Reference of code and issues.
HTML Code
<dt><a href="#" class="rm-viewdetails" data-thumb="images/13.jpg">Gourmet Yam Taohu</a></dt>
<dd>Thai tofu salad yam taohu</dd>
JS CODE
viewDetails = function( recipe ) {
var title = recipe.text(),
img = recipe.data( 'thumb' ),
description = recipe.parent().next().text(),
url = recipe.attr( 'href' );
var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );
$modal.appendTo( $container );
var h = $modal.outerHeight( true );
$modal.css( 'margin-top', -h / 2 );
setTimeout( function() {
$container.addClass( 'rm-in rm-nodelay' );
$modal.find( 'span.rm-close-modal' ).on( 'click', function() {
$container.removeClass( 'rm-in' );
} );
}, 0 );
};
javascript html video modal-dialog
javascript html video modal-dialog
asked Jan 20 at 15:15
zigzig
11
asked Jan 20 at 15:15
zigzig
11
edited Jan 21 at 2:02
zig
asked Jan 20 at 15:15
zigzig
11
asked Jan 20 at 15:15
zigzig
11
asked Jan 20 at 15:15
zigzig
11
11
can't find the code for the video, if you can add those will be able to help you.
– Anoop Mc
Jan 20 at 19:00
Here for the same, don't know how to put with JS, but should be kept in a modal.
– zig
Jan 21 at 2:07
add a comment |
can't find the code for the video, if you can add those will be able to help you.
– Anoop Mc
Jan 20 at 19:00
Here for the same, don't know how to put with JS, but should be kept in a modal.
– zig
Jan 21 at 2:07
can't find the code for the video, if you can add those will be able to help you.
– Anoop Mc
Jan 20 at 19:00
can't find the code for the video, if you can add those will be able to help you.
– Anoop Mc
Jan 20 at 19:00
Here for the same, don't know how to put with JS, but should be kept in a modal.
– zig
Jan 21 at 2:07
Here for the same, don't know how to put with JS, but should be kept in a modal.
– zig
Jan 21 at 2:07
add a comment |
1 Answer
1
active
oldest
votes
I'm not certain, but it sounds like you're trying to play a video when the user clicks an element that contains an image. If so, you could use the HTML5 video element, which has a built-in poster attribute to contain a placeholder image. (See HTML5 video for details.)
You'd just add a source element (with its own src attribute set to your video's path) inside the video element, give the video element the controls attribute, and wait for the user to click the built-in play button. (Note that some browsers require the video source to be formatted as mp4. ). To avoid compatibility problems between browsers, define multiple video types (multiple source elements)
edited Jan 20 at 18:54
Matej J
327
answered Jan 20 at 15:46
CatCat
43327
Thank you for the guide, will try to do that way, trying to do auto play programmable on open. Should be simple.
– zig
Jan 21 at 1:56
Great. And please remember to mark my answer as accepted if you like.
– Cat
Jan 21 at 5:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54277855%2fhtml-video-with-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I'm not certain, but it sounds like you're trying to play a video when the user clicks an element that contains an image. If so, you could use the HTML5 video element, which has a built-in poster attribute to contain a placeholder image. (See HTML5 video for details.)
You'd just add a source element (with its own src attribute set to your video's path) inside the video element, give the video element the controls attribute, and wait for the user to click the built-in play button. (Note that some browsers require the video source to be formatted as mp4. ). To avoid compatibility problems between browsers, define multiple video types (multiple source elements)
edited Jan 20 at 18:54
Matej J
327
answered Jan 20 at 15:46
CatCat
43327
Thank you for the guide, will try to do that way, trying to do auto play programmable on open. Should be simple.
– zig
Jan 21 at 1:56
Great. And please remember to mark my answer as accepted if you like.
– Cat
Jan 21 at 5:44
add a comment |
I'm not certain, but it sounds like you're trying to play a video when the user clicks an element that contains an image. If so, you could use the HTML5 video element, which has a built-in poster attribute to contain a placeholder image. (See HTML5 video for details.)
You'd just add a source element (with its own src attribute set to your video's path) inside the video element, give the video element the controls attribute, and wait for the user to click the built-in play button. (Note that some browsers require the video source to be formatted as mp4. ). To avoid compatibility problems between browsers, define multiple video types (multiple source elements)
edited Jan 20 at 18:54
Matej J
327
answered Jan 20 at 15:46
CatCat
43327
Thank you for the guide, will try to do that way, trying to do auto play programmable on open. Should be simple.
– zig
Jan 21 at 1:56
Great. And please remember to mark my answer as accepted if you like.
– Cat
Jan 21 at 5:44
add a comment |
I'm not certain, but it sounds like you're trying to play a video when the user clicks an element that contains an image. If so, you could use the HTML5 video element, which has a built-in poster attribute to contain a placeholder image. (See HTML5 video for details.)
You'd just add a source element (with its own src attribute set to your video's path) inside the video element, give the video element the controls attribute, and wait for the user to click the built-in play button. (Note that some browsers require the video source to be formatted as mp4. ). To avoid compatibility problems between browsers, define multiple video types (multiple source elements)
edited Jan 20 at 18:54
Matej J
327
answered Jan 20 at 15:46
CatCat
43327
I'm not certain, but it sounds like you're trying to play a video when the user clicks an element that contains an image. If so, you could use the HTML5 video element, which has a built-in poster attribute to contain a placeholder image. (See HTML5 video for details.)
You'd just add a source element (with its own src attribute set to your video's path) inside the video element, give the video element the controls attribute, and wait for the user to click the built-in play button. (Note that some browsers require the video source to be formatted as mp4. ). To avoid compatibility problems between browsers, define multiple video types (multiple source elements)
edited Jan 20 at 18:54
Matej J
327
answered Jan 20 at 15:46
CatCat
43327
edited Jan 20 at 18:54
Matej J
327
edited Jan 20 at 18:54
Matej J
327
edited Jan 20 at 18:54
Matej J
327
327
answered Jan 20 at 15:46
CatCat
43327
answered Jan 20 at 15:46
CatCat
43327
answered Jan 20 at 15:46
CatCat
43327
43327
Thank you for the guide, will try to do that way, trying to do auto play programmable on open. Should be simple.
– zig
Jan 21 at 1:56
Great. And please remember to mark my answer as accepted if you like.
– Cat
Jan 21 at 5:44
add a comment |
Thank you for the guide, will try to do that way, trying to do auto play programmable on open. Should be simple.
– zig
Jan 21 at 1:56
Great. And please remember to mark my answer as accepted if you like.
– Cat
Jan 21 at 5:44
Thank you for the guide, will try to do that way, trying to do auto play programmable on open. Should be simple.
– zig
Jan 21 at 1:56
Thank you for the guide, will try to do that way, trying to do auto play programmable on open. Should be simple.
– zig
Jan 21 at 1:56
Great. And please remember to mark my answer as accepted if you like.
– Cat
Jan 21 at 5:44
Great. And please remember to mark my answer as accepted if you like.
– Cat
Jan 21 at 5:44
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54277855%2fhtml-video-with-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can't find the code for the video, if you can add those will be able to help you.
– Anoop Mc
Jan 20 at 19:00
Here for the same, don't know how to put with JS, but should be kept in a modal.
– zig
Jan 21 at 2:07