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 が再生できなくなるのは、まったく単純なことです。.appendToなぜ、またはどのように or を実行して機能させるのか疑問に思って.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

自動再生は 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

これを試して：

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

このリンクで解決策を見つけることができると思います: How do I embed a mp4 movie into my html?

ちなみに、私のiPhoneでjsfiddleを試してみましたが、互換性がないようです。コントロールはまったくありません。

@BenjaminPowersタグに追加しようとしましたcontrols="controls"かvideo？

編集：

ようやく解決策が得られたと思います。以下のように、html5 の正しい doctype を使用していることを確認していただけますか。

<!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 に答える