笔记本html5播放没有图像,HTML5视频标签无法在Lightbox中使用(HTML5 Video: autoplay not working in lightbox)...
HTML5视频标签无法在Lightbox中使用(HTML5 Video: autoplay not working in lightbox)
我正在使用html5视频标签在灯箱中显示视频。 视频本身工作正常。 但是当我尝试自动播放时，有人打开灯箱，我失败了。 这里是我使用的JavaScript代码。
HTML来触发这是工作正常的灯箱。
视频标签的HTML也工作正常。
Your browser does not support HTML5 video.
Javascript代码autlplaying视频点击灯箱。 没有按预期工作。
$(".btnlb").click(function(e){
var myVideo = document.getElementById("lbvideo");
myVideo.play();
});
点击后，我也试过使用超时 ， 但没有奏效 。
$(".btnlb").click(function(e){
setTimeout(function() {
var myVideo = document.getElementById("lbvideo");
myVideo.play();
console.log(myVideo);
}, 5000);
});
I am using html5 video tag for displaying video in a lightbox. The video itself works fine. But when i try to autoplay it when someone opens the lightbox i fail. Here is the javascript code i am using.
HTML to trigger lightbox which is working fine.
HTML of video tag which is also working fine.
Your browser does not support HTML5 video.
Javascript code for autlplaying video on click of lightbox. Not working as expected.
$(".btnlb").click(function(e){
var myVideo = document.getElementById("lbvideo");
myVideo.play();
});
I have also tried using timeout after click, but that did not work.
$(".btnlb").click(function(e){
setTimeout(function() {
var myVideo = document.getElementById("lbvideo");
myVideo.play();
console.log(myVideo);
}, 5000);
});
原文：https://stackoverflow.com/questions/46977213
更新时间：2020-01-25 12:14
最满意答案
经过几个小时的研究，我找到了一种可以在几分钟内完成所有工作的替代方案。 我使用了非常容易整合HTML5视频播放器的余辉。 有了这个简单的设置，我全部设置好了，看起来非常好。
afterglow player分享，以防它帮助别人并节省一些时间。 快乐编码。 :)
After working on this for a few hours, i found an alternative that did everything in minutes. I used afterglow which is a super easy to integrate HTML5 video player. With this simple setup i was all set and it looked really good.
afterglow playerSharing in case it helps someone else and saves them some time. Happy Coding. :)
相关问答
您可以使用autoplay实现此目的：
Your browser does not support the video tag.
如果你想获得autoplay的参数，让我们说，用php，你可以使用： url： http://mydomain/vi
...
您可以使用http://mediaelementjs.com/ plugin来实现此目的。它将播放.ogv，.mp4，.webm。 这将解决您的问题。 You can achive this by using http://mediaelementjs.com/ plugin.It will play .ogv,.mp4,.webm. This will solve your problem.
由于某些原因，除非您设置controls =“true”标志，否则视频无法在iPad上播放。 For some reason videos would not play on iPad unless you set the controls="true" flag.
如果视频存储在与HTML相同的目录中，并且文件名正确，则应该没问题。 如果你已经在几个不同的浏览器中尝试过(我假设你有)那么，是的，它可能是视频编码。 Provided the videos are stored in the same directory as the HTML, and you have the filenames correct, this should be fine. If you've tried it in several different browsers (I
...
你可以使用html5的媒体方法和事件 。 一旦幻灯片放映动画完成，我就使用play方法来开始play视频，并在视频播放结束后使用ended回调函数调用fancybox.next()函数。 这是您可以检查的工作版本： $(document).ready(function() {
$(".fancybox").fancybox({
afterShow: function() {
// After the show-slide-animation has ended - p
...
它看起来像以下代码：
停止在ios11上工作(还有许多其他功能......)。 我确认source标签在ios9上工作了)。 尝试直接将src="path/to/video.mp4"放入video标签，它应该适用于ios11。 一个工作示例来自webkit.org发布的iOS新视频策略 ：
image mp4 不幸的是，数据-mp4对于mp4仍然不起作用，但webm现在会这样做 Found the answer - Complet
...
经过几个小时的研究，我找到了一种可以在几分钟内完成所有工作的替代方案。 我使用了非常容易整合HTML5视频播放器的余辉。 有了这个简单的设置，我全部设置好了，看起来非常好。
afterglow player...
从iOS 6.1开始，不再可以在iPad上自动播放视频。 我猜他们为什么禁用了自动播放功能？ 好吧，由于许多设备所有者在他们的设备上有数据使用/带宽限制，我认为Apple认为用户自己应该决定何时启动带宽使用。 经过一些研究后，我在Apple文档中发现了以下有关iOS设备自动播放的摘录，以确认我的假设： “Apple决定通过脚本和属性实现来禁用在iOS设备上自动播放视频。 在Safari中，在iOS(适用于所有设备，包括iPad)上，用户可能位于蜂窝网络上并按数据单元收费，因此禁用预加载和自动播放。
...
您可以使用内联html模式显示它 $( document ).ready( function() {
$( '#openColorbox' ).colorbox( {
inline : true,
width : '80%',
height : 'auto',
href : '#inlinevideocontent'
} );
} );
这是你的内联div