使用JavaScript for iPad插入HTML5视频

Question

我正在尝试使用jQuery for iPad将视频插入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中存在一个错误,可以防止动态创建的视频元素正确加载.

为了解决这个问题,设置了源属性并在设置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();

Answer 2

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

将所有视频放置在页面上，每个视频的样式为“display: none”。然后.show()在点击事件上适当的div。