11

.appendTo我遇到了一个有趣的问题，即我的视频在或之后无法在 iPad 中播放.detach。它显示了一个播放按钮，但是当按下播放按钮时，什么也没有发生。

jsfiddle http://jsfiddle.net/LHTb5/1/

HTML

<video id="video1">
    <source id="mp4" src="https://s3.amazonaws.com/s3hub-1b3c58271cb3e0dfa49d60cae0ac8b86ade30aed6294bdb5fe682e2bf/HTML5/sintel_trailer-480.mp4" type="video/mp4"/>
</video>


<div id="new"></div>

Javascript

​$(document).ready(function(){
   $("#video1").appendTo($("#new"));
});​

编辑

好的，伙计们，对于什么有效，什么无效，有些混乱。让我让它变得非常容易。

http://jsfiddle.net/LHTb5/2/ <--- 有效

http://jsfiddle.net/ecbUP/ <---- 不起作用

与 html、标签或自动播放没有任何关系。这只是一件让 iPad 无法播放的简单事情。我只是想知道为什么，或者如何做一个.appendToor.detach并让它工作。

4

4 回答 4

7

搬家好像确实有问题video tag。重建整个视频标签是一个可行的解决方案（见小提琴）

$(document).ready(function(){
    var tt = $('<video/>', {
        id: 'video2',
        'autobuffer' : 'autobuffer',
        'controls'   : 'controls',
        'autoplay'   : 'autoplay',
        html         : $('<source />', {
            'src'    : 'http://media.w3.org/2010/05/sintel/trailer.mp4',
            'type'   : 'video/mp4'       
        })
    });
    $("#video1").remove();
    tt.appendTo($('#new'));
});​

我使用硬编码值来组装新的视频标签，但您可以.attr()在视频标签和源上使用以从标签中获取值。

我知道这并不能解决问题appendTo()。

完整性：在 iPad2 - iOS4.3.3 / iPod 5 - iOS6.0.1 / iPod 5 - iOS 7 上测试

编辑：更新小提琴中的视频链接并在 iOS7 上测试

于 2012-12-20T08:14:30.697 回答
0

试试这个：

$(document).ready(function(){
    $("#video1").appendTo("#new");
    $('#video1').get(0).play();
});​
于 2012-12-14T15:31:18.357 回答
0

自动播放在 iPad 上不起作用。

你能在 iPad 上自动播放 HTML5 视频吗？

如果要播放视频，可以这样添加（不带<source>）：

<video controls src="https://s3.amazonaws.com/s3hub-1b3c58271cb3e0dfa49d60cae0ac8b86ade30aed6294bdb5fe682e2bf/HTML5/sintel_trailer-480.mp4"></video>

jsfiddle

在我的项目中，我这样做：

            ...
            initVideoPlayer: function(id) {

                var firstvideo='foo.mp4';
                this.embeddVideoPlayer(firstvideo);
            },

            embeddVideoPlayer: function(videoFile) {
                this.setupVideoPlayer(videoFile);
                this.appendVideoPlayer();
            },

            /** Setup Video-Player with Size 950px x 406px */
            setupVideoPlayer: function(videoFile) {
                this.videotag = document.createElement('video');
                this.videotag.src = videoFile;
                this.videotag.height = "406";
                this.videotag.width = "950";
                this.videotag.seekable = true;
            },

            /** Setup Video-Player to DOM,  */
            appendVideoPlayer: function() {
                var node = document.getElementById('new'); 
                this._removeChildNodes(node);
                node.appendChild(this.videotag);

            },
            _removeChildNodes: function(node) {
                while (node.hasChildNodes()) {
                    node.removeChild(node.lastChild);
                };
            },
            ....

每次我开始播放视频时，我都必须调用 embeddVideoPlayer(videoFile)。

于 2012-12-17T07:57:14.907 回答
0

我想你可以在这个链接中找到你的解决方案： 如何将 mp4 电影嵌入到我的 html 中？

顺便说一句，我在我的 iphone 上尝试了 jsfiddle，它似乎不兼容。根本没有控制。

controls="controls"@BenjaminPowers您是否尝试添加video标签？

编辑：

我想我终于找到了解决方案，您能否确认您使用的是正确的 html5 文档类型，如下所示：

<!DOCTYPE html>
<html>

这是来自 W3Schools 的代码：

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4"/>
  <source src="movie.ogg" type="video/ogg"/>
  Your browser does not support the video tag.
</video>

</body>
</html>

我在我的 iPhone 上尝试了下面的链接，它运行良好，视频完整显示，您将使用 IOS 控件：

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

于 2012-12-19T18:43:58.500 回答