Необходимо загрузить изображение-текстуру. после этого с помощью createPattern() создать текстуру. Также при необходимости можно задать, чтобы изображение повторялось либо нет.
var pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern;
При вводе данных в поле input всё, что не совпадает со строкой поиска, будем скрывать, оставляя в списке только нужные результаты.
Поиск в списке основывается на использовании регулярных выражений, а так как значение в поле ввода не постоянно, лучше использовать объектную запись регулярных выражений RegExp() вместо литеральной:
var field = $('#list').find('option');
// собственно поиск
$('#searching').bind('keyup', function() {
var q = new RegExp($(this).val(), 'ig'),
bol = true;
for (var i = 0, l = field.length; i < l; i += 1) {
var option = $(field[i]),
parent = option.parent();
if ($(field[i]).text().match(q)) {
if (parent.is('span')) {
option.show();
parent.replaceWith(option);
}
} else {
if (option.is('option') && (!parent.is('span'))) {
option.wrap('').hide() } } } });
Видно, что непосредственно поиск не представляет ничего сложного: весь интерес в отображении найденных результатов. Дело в том, что простое применение свойств, скрывающих элементы списка, невсегда приводит к ожидаемому результату. Например, в некоторых браузерах (Chrome, Internet Explorer) если просто добавить display:none к тегу option, последний всё равно останется видимым.
Однако этот же тег option, обернутый тегом span, понимает display:none, и ведёт себя корректно.
Показ видео осуществляется с помощью HTML5 тега <video> </video>
Общий вид
<video src="video.mp4" controls="controls">
Параметры
autoplay=»autoplay» – видео воспроизводится сразу после загрузки страницы.
autobuffer=»autobuffer» – видео воспроизводится уже в момент загрузки страницы.
controls=»controls» – показать панель управления видеоплеером.
loop=»loop» – по окончанию, видео проигрывается снова.
src=»url» – путь к источнику видео.
type=»video/ogg» – определяет формат видео.
height=»» – высота видеоплеера.
width=»» – ширина видеоплеера.
Пример для проигрывания видеофайла на сайте с помощью HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<video src="video.mp4" controls="controls">
Ваш браузер не поддерживает теги HTML5 для видео.Необходимо обновить браузер!
</video>
</body>
</html>
Для нормального воспроизведения видео во всех браузерах можно добавить несколько источников видео в разных форматах для воспроизведения (Ogg, MPEG4, WebM).Для этого используется тег <source> внутри тэга <video>. Браузер будет использовать первый поддерживаемый им формат.
Пример для проигрывания видео файла с несколькими источниками на сайте с помощью HTML5
<video controls="controls">
<source src="video.mp4" type="video/ogg" />
<source src="video.ogv" type="video/mp4" />
<source src="video.webm" type="video/webm" />
Ваш браузер не поддерживает теги HTML5 для видео.Необходимо обновить браузер!
</video>
Вывод текста с текстурой, используя HTML5 Canvas
