我在 html5 视频标签上有这种奇怪的行为。 我有 4 个视频,我想同时播放。 所以我创建了自己的播放/暂停控制栏,所以当点击播放按钮时,将播放所有 4 个视频,与暂停按钮相同。
在 safari 上,它有一个奇怪的问题,视频没有同时播放,当我点击播放时有 1 或 2 个视频有延迟,所以不是所有的视频同时播放。
在 Chrome 和 Firefox 上它工作正常,safari 有什么问题?
我正在使用 javascript .play() 函数来播放所有视频。
我还确保视频在播放前已加载。类似的东西,
<video id="example_video_1" class="video-js vjs-default-skin" preload="auto">
<source src="asset/video/al_vertrag_kranken_v1_part1.ogv" type='video/ogg' />
<source src="asset/video/al_vertrag_kranken_v1_part1.mp4" type='video/mp4' />
<source src="asset/video/al_vertrag_kranken_v1_part1.webm" type='video/webm' />
</video>
video_1 = document.getElementById('example_video_1');
if (video_1.readyState == 4 && video_2.readyState == 4 && video_3.readyState == 4 && video_4.readyState == 4) {
video_1.play();
video_2.play();
video_3.play();
}
还有 3 个这样的视频标签,1 个只是示例。
最佳答案
I Noticed you are using Videojs library (your video has the class "video-> js"
请检查我为您准备的 fiddle ,用 Videojs 进行测试
我想这就是你所需要的 ;)
如您所见,Safari 的问题一直在发生。在 chrome 或其他浏览器中,它运行完美。它似乎是由开始播放视频时的延迟产生的。开始播放音频时也会发生同样的情况。
也许在 that stack你会找到你的解决方案。似乎音频解决方案是生成一个 swf (FLASH) 对象并用它播放视频(对此一无所知,但我会尝试通过示例准备对答案的另一个编辑)
编辑
I´ve found this js library https://github.com/videojs/video-js-swf I´ll try with it to solve!
希望对你有所帮助。
$(window).ready(function() {
alert("FIRST LOADING VIDEOS AND WAITING");
var vid = document.getElementById("example_video_1");
vid.oncanplay = function() {
startplay(1);
};
var vid2 = document.getElementById("example_video_2");
vid2.oncanplay = function() {
startplay(1);
};
var vid3 = document.getElementById("example_video_3");
vid3.oncanplay = function() {
startplay(1);
};
var vid4 = document.getElementById("example_video_4");
vid4.oncanplay = function() {
startplay(1);
};
});
var loaded = 0;
function startplay(num) {
// alert(num);
loaded += 1;
if (loaded == 4) {
document.getElementById("example_video_1").play();
document.getElementById("example_video_2").play();
document.getElementById("example_video_3").play();
document.getElementById("example_video_4").play();
}
}<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin" preload="auto" width="640" height="264">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' />
</video>
<video id="example_video_2" class="video-js vjs-default-skin" preload="auto" width="640" height="264">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' />
</video>
<video id="example_video_3" class="video-js vjs-default-skin" preload="auto" width="640" height="264">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' />
</video>
<video id="example_video_4" class="video-js vjs-default-skin" preload="auto" width="640" height="264">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' />
</video>
关于javascript - 在 Safari 上同时播放 html5 视频标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29556796/
我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?
在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
我有一个div,它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素?开始元素看起来像这样。如果输入不正确,添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
动漫制作技巧是很多新人想了解的问题,今天小编就来解答与大家分享一下动漫制作流程,为了帮助有兴趣的同学理解,大多数人会选择动漫培训机构,那么今天小编就带大家来看看动漫制作要掌握哪些技巧?一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性,以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料,可以是手绘也可以是3d软件创建。在此步骤中,要注意的问题是色彩和平面布局。三、动漫制作制作完成后,加工成型。完成不同的表现形式后,就要对设计稿进行加工处理,使加工的难易度降低,并得到一些基本准确的概念,以便于后续的大样、准确的尺寸制定。四、
2022/8/4更新支持加入水印水印必须包含透明图像,并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时,是将这组图像视为MJPG流。我需要转换一组PNG图像到视频,FFMPEG就不认了。pyav内置了ffmpeg库,不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p
Transformers开始在视频识别领域的“猪突猛进”,各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解,本篇主要介绍了FBAI团队的TimeSformer,这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用,就请点赞、收藏、关注!paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图