我有一个响应站点,包含html5视频。我有一些javascript可以检查视频元素的大小是否低于某个阈值。如果是,它将移除控件,将视频播放按钮覆盖图像放置在视频元素的顶部,然后将click事件添加到保存视频元素的容器中。当点击容器时,它会将视频复制到一个模态对话框中并播放视频。
现在的困境是:
这一点可以在这里看到。
以下是HTML:
<div class="video modal-trigger col-lg-4 col-md-4 col-sm-4">
<canvas></canvas>
<video preload="auto" controls="controls" poster="img/why-autologel-poster.png">
<source src="media/why-autologel.m4v" type='video/mp4'>
<source src="media/why-autologel.webm" type='video/webm'>
</video>
</div>
<div class="col-lg-8 col-md-8 col-sm-7">
<h2 class="modal-heading">
Why AutoloGel?
</h2>
<p class="modal-copy">
See what AutoloGel offers to your patients.
</p>
</div>
<!-- Modal Window -->
<div class="modal fade" id="modal-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<div class="media"></div>
<div class="copy"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
下面是JavaScript:
$(document).ready(function() {
// Play very small videos in modal box
if ( $(window).width() > 750 ) {
var modalvideo = document.getElementsByTagName('video');
// Hide controls for very small videos
for (var i = 0; i < modalvideo.length; i++) {
if ( $(modalvideo[i]).width() < 470 ) {
$(modalvideo[i]).removeAttr('controls');
if ( $('html').hasClass('IE-9') ) {
$(modalvideo[i]).after('<img class="poster-overlay" src="img/poster-overlay-ie9.png" alt="play video">');
} else {
$(modalvideo[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">');
}
}
}
// Add click event to video container that brings up video in a modal window
$('.modal-trigger').on("click", function() {
if ( $(this).width() < 470 ) {
// Get video, title and any copy text
var media = $(this).html();
var title = $(this).next().children('.modal-heading').text();
var copy = $(this).next().children('.modal-copy').text();
// Insert video, title and copy text into modal window
$('.modal-title').html(title);
$('.modal-body > .media').html(media);
$('.modal-body > .copy').text(copy);
$('#modal-window .poster-overlay').remove('');
$('#modal-window').modal('show');
// Autoplay video after modal window has rendered
$('#modal-window').on('shown.bs.modal', function() {
modalvideo[modalvideo.length - 1].setAttribute('controls', 'controls');
modalvideo[modalvideo.length - 1].play();
});
// Stop play video when modal window is closed
$('#modal-window').on('hide.bs.modal', function() {
modalvideo[modalvideo.length - 1].pause();
});
}
});
}
});
谢谢你的帮助!
从源节点的type
属性中删除分号,应该是:type=“video/mp4”
,其他浏览器可能会原谅这一点。
想通了。
问题分两部分。对于Chrome,它的缓存和复制的DOM元素有些怪异。我想当开发人员工具打开时,它还能工作,因为缓存被禁用了。只需在src属性的末尾为复制的video元素应用一个随机GET变量,将其标记为不同于缓存的文件即可解决问题。
和IE有点不一样。HubSpot使用AmazonS3作为它的CDN,当我查看视频文件的头时,它的内容类型被设置为Application/Octet-Stream,而Internet Explorer不支持这种类型。AWS允许在文件上传时进行设置,但HubSpot是在幕后进行此操作的,而我所知道的用户没有设置此操作的能力。他们正在想办法。
最终奏效的解决方案是:
$(document).ready(function() {
// Play very small videos in modal box
if ( $(window).width() > 750 ) {
var allvideos = $('video');
// Hide controls for very small videos
for (var i = 0; i < allvideos.length; i++) {
if ( $(allvideos[i]).width() < 470 ) {
$(allvideos[i]).removeAttr('controls');
if ( $('html').hasClass('IE-9') ) {
$(allvideos[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">');
} else {
$(allvideos[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">');
}
}
}
// Add click event to video container that brings up video in a modal window
$('.modal-trigger').on('click', function() {
if ( $(this).width() < 470 ) {
// Get video/img, title and any copy text
var media = $(this).html();
var title = $(this).next().children('.modal-heading').text();
var copy = $(this).next().children('.modal-copy').text();
if (! title.length) { title = '<br>'; }
// Insert video, title and copy text into modal window
var modalsrc = [];
var modaltype = [];
$(media).children('source').each(function() {
modalsrc.push( $(this).attr('src') );
modaltype.push( $(this).attr('type') );
});
$('.modal-title').html(title);
$('.modal-body > .media').html(media);
$('.modal-body > .copy').text(copy);
$('#modal-window .poster-overlay').remove('');
// Assign a random version to video src to bypass cache
var modalsources = $('#modal-window source');
var nocachesrc = '';
for (var i = 0; i < modalsources.length; i++) {
nocachesrc = modalsrc[i] + '?rnd=' + Math.random()*Math.random();
modalsources[i].setAttribute('src', nocachesrc);
modalsources[i].setAttribute('type', modaltype[i]);
}
var modalvideo = $('#modal-window video');
modalvideo[0].setAttribute('controls', 'controls');
// Reveal modal window and play video
$('#modal-window').modal('show');
$('#modal-window').on('shown.bs.modal', function() {
modalvideo[0].play();
});
// Stop playing video when modal window is closed
$('#modal-window').on('hide.bs.modal', function() {
modalvideo[0].pause();
});
}
});
}
});
我想创建一个gstreamer管道来背靠背播放两个mp4视频。是否可以使用gst启动进行游戏?我可以为此使用multifilesrc吗? 请告诉我播放两个视频背靠背的路径。 提前感谢!
我想使用html5视频标签嵌入一个视频: https://dl.dropboxusercontent.com/u/64454818/TMP/P6135199.MOV 我使用对其进行了转换: FFMPEG输出: 我尝试将其嵌入如下: 然而,Chrome不播放视频,只提供下载(和我转换视频之前一样)。Firefox也有同样的问题。 我已经测试和其他mp4文件(从我的手机)播放得很好。 有什么问题吗?我
问题内容: 我有一个要使用HTML5 标签在IE9中播放的mp4视频。我将MIME类型添加到了IIS 7中,因此,如果我浏览它可以在Chrome和IE9中播放,但不能在HTML5中播放,则Chrome会以HTML播放视频。这是代码: 有任何想法吗? 谢谢 更新: 在Firefox 5.0中尝试了相同的文件,但也无法正常工作,只有Chrome可以播放mp4视频。 问题答案: 最终使用http://v
问题内容: 我通过asp.net开发了一个移动页来播放mp4视频。 我知道iOS已禁用自动播放功能以最大程度地减少用户带宽,所以我如何在Android上自动播放HTML5 mp4视频? 我已经在HTML5代码中放置了自动播放功能,但是它不起作用。 以下是我的代码: 此外,我已经解决了用户单击图像叠加层可以播放视频的问题。感谢Karthi 这是代码: 谢谢 问题答案: 您可以将’muted’和’au
尝试过添加loop: true、 监听视频播放结束后重新播放等方式都是h5正常,app会一直转圈