Хорошо, посмотрел видео-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:
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 на jsbin.
Обновление:
Как 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
Это работает, спасибо! Я вижу, что нет необходимости в функции _V_, как указано на веб-сайте VideoJS. – Light
OT: '.attr()' принимает и объект, который позволяет вам установить все атрибуты красиво за один присест. Также кэширование объектов jQuery в переменных является хорошей практикой: 'var $ obj = $ ('') .attr ({...}) ...'. – polarblau
Просто заметьте, вы также можете сделать много настроек видео в VJS (предпочтение действительно). Вы можете просто настроить видео с идентификатором, а затем использовать Videojs для инициализации проигрывателя с помощью опций и нового src. –