通过javascript播放mp4视频
Play mp4 video via javascript
我有一个包含html5视频的响应网站。我有一些javascript,可以检查视频元素的大小是否低于某个阈值。如果是,它会删除控件,将视频播放按钮覆盖图像放在视频元素的顶部,然后将单击事件添加到容纳视频元素的容器中。单击容器时,它会将视频复制到模式对话框中并播放视频。
这是一个难题:
- webm版本没有任何问题
- mp4版本的模态视图在Safari中没有问题
- 如果mp4播放到位(即足够大,不需要模态窗口),它播放得很好
- mp4版本的模态视图不会在Chrome或IE中播放
- 然而,如果我有他们的内置DOM,它将在Chrome或IE中工作检查员打开(例如IE的F12工具)
这可以在这里看到。
这是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();
});
}
});
}
});
谢谢你的帮助!
想明白了。
问题分为两部分。对于Chrome,它的缓存和复制的DOM元素有一些奇怪之处。当开发人员工具打开时,我认为它是有效的,因为缓存被禁用了。简单地在复制的视频元素的src属性末尾应用一个随机的GET变量,将其标记为与缓存的文件不同的文件,就解决了这个问题。
IE有点不一样。HubSpot使用AmazonS3作为其CDN,当我查看视频文件的标题时,其内容类型被设置为InternetExplorer不支持的应用程序/八位字节流。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();
});
}
});
}
});
从源节点的type
属性中删除分号,应该是:type="video/mp4"
,其他浏览器可能只是宽容了这一点。
相关文章:
- VideoJS:mp4在动态更改视频url时不起作用
- 三星智能电视视频播放器应用程序-访问存储在USB上的mp4
- Node.js:获取一个mp4文件的视频和音频格式信息
- 通过javascript播放mp4视频
- 如何使用vanillaJS将mp4视频插入到具有特定维度的html文档中,播放2秒,然后删除节点
- 当链接中引用视频时,是否可以在iPad上以全屏模式打开.mp4
- 无法在浏览器中播放MP4视频
- 火狐 10.0.1 不播放 html mp4 视频
- Chrome中的HTML5视频在mp4下不起作用
- YouTube嵌入式播放器将视频下载为MP4按钮属性
- 如何在 MVC 中播放视频时停止滑块.mp4
- HTML5读取mp4的视频元数据
- mencoder 从 html 视频标签镶边中的 JPG 播放停止生成 MP4 H.264
- Flowplayer中的MP4视频无法在Windows 7 Chrome中播放
- 使用Javascript下载HTML5 mp4视频
- 如何使用servlet和jsp在浏览器上播放视频,视频存储在本地系统中,如D:/video/sample.mp4
- 用JavaScript创建MP4视频
- JW播放器-当其他媒体(RTMP)断开连接时,循环MP4待机视频
- 如何将网页渲染视频保存到mp4-Diaporama
- 视频.mp4赢得'不要在任何浏览器中显示