blocks|key|1240139|text|在尝试加载视频之前，请检查浏览器是否可以播放视频：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1240140|function+canPlayVorbis()+{
++++var+v+=+document.createElement('video');
++++return+!!(v.canPlayType+&&+v.canPlayType('video/ogg;+codecs="theora,+vorbis"').replace(/no/,+''));
}

function+canPlayMP4()+{
++++var+v+=+document.createElement('video');
++++return+!!(v.canPlayType+&&+v.canPlayType('video/mp4;+codecs="avc1.42E01E,+mp4a.40.2"').replace(/no/,+''));
}

function+canPlayWebM()+{
++++var+v+=+document.createElement('video');
++++return+!!(v.canPlayType+&&+v.canPlayType('video/webm;+codecs="vp8,+vorbis"').replace(/no/,+''));
}|code-block|syntax|javascript|1240141|摘自Dive+Into+HTML5+Appendix+A。|offset|length|1240142|entityMap|0|LINK|mutability|MUTABLE|url|http://diveintohtml5.info/everything.html^0|0|0|2|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Check to see if the browser can play the video before you attempt to load it:

<pre><code>function canPlayVorbis() {
 var v = document.createElement('video');
 return !!(v.canPlayType &amp;&amp; v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, ''));
}

function canPlayMP4() {
 var v = document.createElement('video');
 return !!(v.canPlayType &amp;&amp; v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
}

function canPlayWebM() {
 var v = document.createElement('video');
 return !!(v.canPlayType &amp;&amp; v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
}
</code></pre>

Taken from <a href="http://diveintohtml5.info/everything.html" rel="nofollow noreferrer">Dive Into HTML5 Appendix A</a>.

blocks|key|1025522|text|在iPad上，它不会加载视频，直到用户启动一个事件，这是苹果为防止iPhone或iPad用户烧掉他们的数据套餐而设计的。所以你不能做你想做的事，对不起。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1025523|请查看此link，并查找设备特定注意事项部分以获取一些信息。但它不会开始加载数据，所以在用户触摸canplaythrough事件之前，它不会触发该事件。|offset|length|1025524|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html^0|0|4|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

On the iPad it will not load the video until a user starts an event this is by design of apple to prevent iPhone or iPad users from burning up their data plans. So you will not be able to do what you want sorry.

Check out this <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html" rel="nofollow noreferrer">link</a> and look for the Device-Specific Considerations section for some info. But it will not start loading data so it couldn't fire the canplaythrough event until a user touches it.

blocks|key|1025543|text|在ipad/iphone上自动启动播放器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1025544|function+fakeClick(fn)+{
++++var+$a+=+$('<a+href="#"+id="fakeClick"></a>');

++++$a.bind("click",+function(e)+{
++++++++e.preventDefault();
++++++++fn();
++++});

++++$("body").append($a);

++++var+evt,
++++++++el+=+$("#fakeClick").get(0);

++++++++if+(document.createEvent)+{
++++++++++++evt+=+document.createEvent("MouseEvents");
++++++++++++if+(evt.initMouseEvent)+{
++++++++++++++++evt.initMouseEvent("click",+true,+true,+window,+0,+0,+0,+0,+0,+false,+false,+false,+false,+0,+null);
++++++++++++++++el.dispatchEvent(evt);
++++++++++++}
++++++++}

++++++++$(el).remove();
}+

$(function()+{
++++var+video+=+$("#mobileVideo").get(0);

++++fakeClick(function()+{
++++++++video.play();
++++});
});|code-block|syntax|javascript|1025545|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

automatically starts player on the ipad/iphone:

<pre><code>function fakeClick(fn) {
 var $a = $('&lt;a href="#" id="fakeClick"&gt;&lt;/a&gt;');

 $a.bind("click", function(e) {
 e.preventDefault();
 fn();
 });

 $("body").append($a);

 var evt,
 el = $("#fakeClick").get(0);

 if (document.createEvent) {
 evt = document.createEvent("MouseEvents");
 if (evt.initMouseEvent) {
 evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 el.dispatchEvent(evt);
 }
 }

 $(el).remove();
} 

$(function() {
 var video = $("#mobileVideo").get(0);

 fakeClick(function() {
 video.play();
 });
});
</code></pre>

blocks|key|1025577|text|解决此视觉问题的方法是隐藏视频元素，直到它准备好播放为止。请注意，您不能设置display:none+(如果您这样做，视频将不会加载)，visibility:hidden也不能解决这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1025578|要解决这个问题，可以使用overflow:hidden将视频元素包装在DIV上，并设置-webkit-transform:translateX(1024px)+(这个数字足够大，可以将视频推到屏幕之外)。|1025579|然后，您必须侦听canplay或canplaythrough或load事件(根据您的需要)，并在此之后将translateX设置为零。|1025580|entityMap^0|12|C|1W|H|0|C|F|17|10|0|8|7|G|E|V|4|1G|A|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|K|$]]

The way to solve this visual problem is to hide the video element until it is ready to be played. Note that you cannot set <code>display:none</code> (video won't load if you do that) and <code>visibility:hidden</code> won't solve the issue either.

To fix it, wrap the video element on a DIV with <code>overflow:hidden</code> and set <code>-webkit-transform:translateX(1024px)</code> (a number high enough to push the video outside the screen).

Than you have to listen for the <code>canplay</code> or <code>canplaythrough</code> or <code>load</code> events (based on your need) and set the <code>translateX</code> to zero after that.

blocks|key|1240345|text|这是一个熟悉HTML5事件的好地方。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1240346|http://www.w3.org/2010/05/video/mediaevents.html|offset|length|1240347|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

Here's a GREAT place to get familiar with HTML5 events.

<a href="http://www.w3.org/2010/05/video/mediaevents.html" rel="nofollow">http://www.w3.org/2010/05/video/mediaevents.html</a>

blocks|key|1025678|text|问题似乎是动态创建视频对象--以某种方式破坏了iPad上的代码。我写了一个视频播放器，它将alreay+present视频元素移动到一个容器中，视频立即停止工作。不过在其他系统上没有问题...我猜你必须找到一种方法，让视频元素已经就位，然后在它上面和下面添加所有其他代码……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1025679|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

the problem seems to be dynamically creating the video object - that somehow breaks the code on the iPad.
I wrote a video player that moves the alreay present video element into an container and immediately the video stops working. no problem on other systems though...
guess you gotta find a way to have the video element already in place and then add all your other code above and below it....

blocks|key|1025720|text|这可能就是为什么你的MP4视频不能播放，直到它完全加载：how+to+get+your+HTML5+MP4+video+to+play+before+being+fully+loaded。不管怎样，值得一试。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1025721|entityMap|0|LINK|mutability|MUTABLE|url|http://www.iandevlin.com/blog/2011/03/html5/how-to-get-your-html5-mp4-video-file-to-play-before-being-fully-downloaded^0|S|1T|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

This is possibly why your MP4 video won't play until it's fully loaded: <a href="http://www.iandevlin.com/blog/2011/03/html5/how-to-get-your-html5-mp4-video-file-to-play-before-being-fully-downloaded" rel="nofollow">how to get your HTML5 MP4 video to play before being fully loaded</a>. Worth a shot anyway.

I have a dynamic video gallery and it works great on a computer. When moving to an iPad, the video starts loading and it shows the cannot play icon. Instead of this I'd rather the video not show until it's ready to play. I have tried to add events listeners for "canplaythrough" and "canplay" and when they occur for the video to fade in then play. Does the iPad not support these events?

<pre><code>new_video = document.createElement('video');
new_video.setAttribute('class', 'none');
new_video.setAttribute('width', '568');
new_video.setAttribute('height', '269');
new_video.setAttribute('id', 'video'+video_num);
current_video.insertBefore(new_video, video_controls);
new_video.load();
new_video.addEventListener('canplaythrough', function() {
 $('#video'+video_num').fadeIn(100);
 new_video.play();
});
</code></pre>

HTML5 video on iPad

容器

HTML5

我有一个动态的视频画廊，它在电脑上工作得很好。当移动到iPad时，视频开始加载，并显示无法播放图标。而不是这样，我宁愿视频在准备好播放之前不显示。我尝试为"canplaythrough“和"canplay”添加事件侦听器，当它们出现时，视频淡入，然后播放。iPad不支持这些事件吗？new_video = documen...

问iPad上的HTML5视频
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPad上的HTML5视频EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPad上的HTML5视频
EN