Làm cách nào để thêm Video mới hoàn toàn từ JavaScript?

Tôi đang cố gắng thêm một đối tượng VideoJS mới và thiết lập nó hoàn toàn từ JS, mà không cần có phần tử video DOM. Kết quả là video được tải nhưng không có bất kỳ điều khiển VideoJS nào. Đây là mã:Làm cách nào để thêm Video mới hoàn toàn từ 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() { 
        // 
        } 
       });

Tôi sẽ đánh giá cao sự giúp đỡ, cảm ơn!

Nguồn

2012-08-03 Light

Được rồi, hãy xem video-js, nó khá đẹp. Hãy thử điều này:

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:

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 trên jsbin.

Cập nhật:

Như polarblau chỉ ra trong một chú thích các jQuery.attr() có thể mất một đối tượng thay vì phải gọi jQuery.attr() nhiều lần như trong ví dụ đầu tiên của tôi.

lưu ý: Dưới đây chỉ là một ví dụ chứ không phải là bản trình diễn làm việc.

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

Nguồn

2012-08-03 09:16:19 Sphvn

Nó hoạt động, cảm ơn! Tôi thấy không cần có hàm _V_ như đã nêu trong trang web VideoJS. – Light

OT: '.attr()' lấy một đối tượng cũng cho phép bạn thiết lập tất cả các thuộc tính độc đáo trong một lần ngồi. Việc lưu các đối tượng jQuery vào các biến là việc thực hành tốt: 'var $ obj = $ ('

Chỉ cần một lưu ý, bạn cũng có thể làm rất nhiều các thiết lập video trong VJS là tốt (sở thích thực sự). Bạn chỉ có thể thiết lập video có id, sau đó sử dụng Videojs để khởi tạo trình phát bằng các tùy chọn và src mới. –

Làm cách nào để thêm Video mới hoàn toàn từ JavaScript?

Trả lời

Các vấn đề liên quan