jquery - 使用 JavaScript 为 iPad 插入 HTML5 视频

Question

我正在尝试使用 iPad 版 jQuery 将视频插入到 HTML 中，但我看到的只是黑屏。如果我将视频标签直接添加到 HTML 页面，一切似乎都可以正常工作。

这是我的 JavaScript 中的内容，我使用 onClick 事件的函数调用它。

var html = "";
html += '<video id="someVideo" width="'+settings.width+'" height="'+settings.height+'" controls="controls">';
html += '<source src="'+url+'"  type="video/mp4" />';
html += '</video>';
$("#videoDiv").html(html); 

如果我在正文中创建一个视频标签，一切似乎都正常

<video width=708px height=300px controls="controls"><source src="video.mp4" type="video/mp4"></video>

我计划使用 JavaScript 的原因是我在同一页面上有几个视频，并且希望用户选择要观看的视频而不是页面上的单个视频......任何关于这方面的想法也会有所帮助

任何帮助将不胜感激谢谢

Answer 1

iPad 的 webkit 中存在一个错误，阻止动态创建的视频元素正确加载。

要解决这个问题，请设置 source 属性并在设置 html 后调用视频元素加载方法

var html = "";
html += '<video id="someVideo" width="'+settings.width+'" height="'+settings.height+'" controls="controls">';
html += '<source src="'+url+'"  type="video/mp4" />';
html += '</video>';
$("#videoDiv").html(html);

$('#someVideo').attr('src', url);
$('#someVideo')[0].load();