JavaScriptから完全に新しい動画を追加するにはどうすればよいですか？

私は新しいVideoJSオブジェクトを追加しようとしており、DOMビデオ要素を持たずにJSから完全に設定しようとしています。その結果、ビデオはロードされていますが、VideoJSコントロールはありません。ここは、コードは次のとおりです。JavaScriptから完全に新しい動画を追加するにはどうすればよいですか？

obj = document.createElement('video'); 
       $(obj).attr('id', 'example_video_1'); 
       $(obj).attr('class', 'video-js vjs-default-skin'); 

       var source = document.createElement('source'); 
       $(source).attr('src', path); 
       $(source).attr('type', 'video/mp4'); 
       $(obj).append(source); 

       $("#content").append(obj); 
       _V_("example_video_1", {}, function() { 
        // 
        } 
       });

私は任意のヘルプ、感謝に感謝します！

出典

2012-08-03 Light

ビデオjsを見てみました。これはかなりいいですね。これを試してみてください：

HTML：

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> 
    <script src="http://vjs.zencdn.net/c/video.js"></script> 
    </head> 
    <body> 
    <div id="content"> </div> 
     <!-- appending video here --> 
    <hr /> 
    <!-- written in html --> 
    <video id="example_video_by_hand" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}"> 
    <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4"> 
    </video> 
    </body> 
</html>

はJavaScript：jsbin上

var obj, 
    source; 

obj = document.createElement('video'); 
$(obj).attr('id', 'example_video_test'); 
$(obj).attr('class', 'video-js vjs-default-skin'); 
$(obj).attr('width', '640'); 
$(obj).attr('data-height', '264'); 
$(obj).attr('controls', ' '); 
$(obj).attr('poster', 'http://video-js.zencoder.com/oceans-clip.jpg'); 
$(obj).attr('preload', 'auto'); 
$(obj).attr('data-setup', '{}'); 

source = document.createElement('source'); 
$(source).attr('type', 'video/mp4'); 
$(source).attr('src', 'http://video-js.zencoder.com/oceans-clip.mp4'); 

$("#content").append(obj); 
$(obj).append(source);

Working example。

更新：コメントで指摘

polarblauとしてjQuery.attr()はむしろ私の最初の例のようにjQuery.attr()を複数回呼び出すために持つよりも、オブジェクトを取ることができます。

注：以下は単なる実例であり、デモの実例ではありません。

var attributes = { 
    'id': 'example_video_test', 
    'class': 'video-js vjs-default-skin', 
    'width': '640', 
    'data-height': '264', 
    'controls': ' ', 
    'poster': 'http://video-js.zencoder.com/oceans-clip.jpg', 
    'preload': 'auto', 
    'data-setup': '{}' 
} 

var element = $('<video/>').attr(attributes) 
//you would also have to add the source element etc but this gives 
//a good example of a shorter approach

出典

2012-08-03 09:16:19 Sphvn

ありがとうございます！私は、VideoJSのウェブサイトに記載されているような_V_機能の必要性がないことを知っています。 – Light

OT： '.attr（）'はオブジェクトを取り込み、すべての属性を一度にうまく設定できるようにします。また、jQueryオブジェクトを変数にキャッシュするのも良い方法です： 'var $ obj = $（ '

VJSでも多くのビデオ設定を行うことができます。あなたはidを持つビデオを設定し、Videojsを使ってオプションと新しいsrcを使ってプレーヤーを初期化することができます。 –

JavaScriptから完全に新しい動画を追加するにはどうすればよいですか？

答えて

関連する問題