使用JavaScript为iPad插入HTML5视频 [英] Inserting HTML5 video using JavaScript for iPad

问题描述

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

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

  var html =; 
 html + ='< video id =someVideowidth ='+ 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.mp4type =video / MP4\" >< /视频> 
  

我计划使用JavaScript的原因是我在同一页面上有很少的视频并且想要用户选择一个视频被视为与页面上的单个视频相对......任何想法都会有所帮助

任何帮助都将非常感谢
感谢

解决方案

iPad的webkit中存在一个缺陷，可以防止动态创建的视频元素正确加载。
$ b

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

  var html =; 
 html + ='< video id =someVideowidth ='+ 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（）; 
  

I am trying to insert a video into HTML using jQuery for iPad but all I see is a black screen. If I add the video tag directly to the HTML page all seems to work fine.

Here is what I have in my JavaScript and I call this using a function for onClick event.

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); 

If I create a video tag right inside the body everything seems to be working fine

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

The reason I am planning a JavaScript is that I have few videos on the same page and wanted the user to select a video to be viewed as oppose to a single video on a page... Any idea around that will also help

Any help will be greatly appreciated Thanks

解决方案

There is a bug in iPad's webkit that prevents dynamically created video elements from loading properly.

To get around this set the source attribute and call the video elements load method after you have set the 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();

这篇关于使用JavaScript为iPad插入HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！