我正在使用在网上为我的票务软件找到的 jquery 脚本。它增加了将视频添加到 WIKI 的功能。问题是它没有为视频设置高度或宽度,是否可以使用此代码完成?
if ($('#idEditArticle')) {
var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
$.each(videos, function(i, video) {
$(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls></video><br/>');
});
}
这里是html格式的输出
<p>
<a border="0" class="fb_attachment" href="default.asp?pg=pgDownload&pgType=pgWikiAttachment&ixAttachment=136818&sFileName=Paragon%20Invoice%203.mp4" rel="nofollow" title="">Paragon Invoice 3.mp4</a></p>
即使可以手动将其添加到 html 中。我无法向元素添加内联 css。我尝试将它包装到一个 div 中,但它不会采用内联样式,它只会在提交时将其删除。
我可以在 jquery 代码中添加高度和宽度以自动设置视频的高度和宽度吗?
最佳答案
这应该有效。请注意我正在使用 max-width
但任何风格都可以。
if ($('#idEditArticle')) {
var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
$.each(videos, function(i, video) {
// Added a style attribute here.
$(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls style="max-width: 100%;"></video><br/>');
});
}
更清晰(从编码的 Angular 来看)的方式是:
if ($('#idEditArticle')) {
// Search for all matching elements. Returns an array of jQuery objects.
var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
// Simply use the array.each to iterate over the preceeding array.
videos.each(function(){
// now create a link, video and source element
var link = $(this);
var video = $('<video />');
var source = $('<source />').attr('src', link.attr('href'));
// append the element correctly to create a tree
video.append(source);
// Heres where you apply multiple style elements
video.css({'max-width':'100%'});
// prepend the tree to the desired location
link.parent().prepend(video);
});
}
实现有效(可能在 < source />
中有一个额外的空间 - 它应该是 <source />
:
// Search for all matching elements. Returns an array of jQuery objects.
var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
// Simply use the array.each to iterate over the preceeding array.
videos.each(function(){
// now create a link, video and source element
var link = $(this);
var video = $('<video />');
var source = $('<source />').attr('src', link.attr('href'));
// append the element correctly to create a tree
video.append(source);
video.css('max-width','100%');
// prepend the tree to the desired location
link.parent().prepend(video);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<a href="test.mp4">Test</a>
关于javascript - 如何给Jquery函数添加高度和宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31410700/