使用jQuery创建一个新的html5视频对象 [英] Create a new html5 video object with jQuery

问题描述

如何使用jQuery创建视频元素，并将其属性(如控件)添加到true(<video control>)，添加和删除视频源(<source src='http://somesite.com/somevideo.mp4')，等等?

How can you create a video element with jQuery, and add it's properties like control to true (<video control>), add and remove video sources (<source src='http://somesite.com/somevideo.mp4'), etc?

我想在加载之前设置所有选项(例如自动播放，true或false等)

I would like to set all it's options before loading (like autoplay, true or false, etc)

我尝试了一下，但没有成功(它只能用于图像，但不能用于视频):

I tried this without success (It worked with images, but not video):

$( document ).ready(function() {
var photo = $('<img />', {
              id: 'photo',
              src: 'http://lorempixel.com/400/200/city/',
              alt: ''
              });
photo.appendTo($('#gallery'));

var video = document.createElement('video');
    alert( video.toSource() ); //For testing
    video.id = 'video';
    video.source.src = 'http://video-js.zencoder.com/oceans-clip.mp4';
    video.type = 'video/mp4';
    video.control = true;
video.appendTo($('#gallery'));
});

jsFiddle: https://jsfiddle.net/9cnaz3ju/1/

jsFiddle: https://jsfiddle.net/9cnaz3ju/1/

推荐答案

像这样:

var video = $('<video />', {
    id: 'video',
    src: 'http://video-js.zencoder.com/oceans-clip.mp4',
    type: 'video/mp4',
    controls: true
});
video.appendTo($('#gallery'));

jsFiddle示例

jsFiddle example

    var photo = $('<img />', {
        id: 'photo',
        src: 'http://lorempixel.com/400/200/city/',
        alt: ''
    });
    photo.appendTo($('#gallery'));

    var video = $('<video />', {
        id: 'video',
        src: 'http://video-js.zencoder.com/oceans-clip.mp4',
        type: 'video/mp4',
        controls: true
    });
    video.appendTo($('#gallery'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="gallery"></div>

只要遵循与image元素相同的基本格式即可.

Just follow the same basic format as your see with the image element.

这篇关于使用jQuery创建一个新的html5视频对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！