Содержание: 40 html шаблонов, установить CMS, HTML5 аудио и видео плейлист

40 html шаблонов для сайта

Некоторые отзывчивые шаблоны для сайта от W3.CSS.

Как установить CMS

Перед установкой CMS необходимо убедиться в наличии на сервере PHP и расширения Sqlite3. Например, для Debian сервера установка выглядит как apt-get install php-fpm php-sqlite3 php-gd.

1. Скачать и распаковать архив
2. Загрузить CMS файлы в желаемую папку на веб сервере
3. Запустить скрипт настройки через веб браузер http://domain/setup/index.php
4. Когда конфигурация и настройка завершены, удалить папку setup с сервера

HTML5 аудио и видео плейлист

Для начала на HTML странице создайте контейнеры для аудио и видео проигрывателей

<audio id="audio_kids" preload="none" controls="controls">
<source src="/content/audio/96kbs_muz_shkatulka_lalilu.mp3" type="audio/mpeg" />Your browser does not support the audio element.</audio>
<div id="playlist_kids">&nbsp;</div>
<hr />
<video id="video_kids" style="display: block; margin-left: auto; margin-right: auto;" controls="controls" width="384" height="192">
<source src="/content/video/faschingskonzert_ismaning_20200217.mp4" type="video/mp4" /></video>
<div id="playlist_kids_vid">&nbsp;</div>

Затем на языке javascript создайте функции для обработки записи проигрывания и сами плейлисты

<script>
function playMediaNow(media_id, source) {
   var player = document.getElementById(media_id);
   if (player) {
   player.pause();
   player.setAttribute('src', source);
   player.play();
  }
}
function createListTable (playlist, media_path, media_id) {
   var playlist_out = '<table class="w3-table w3-striped">';
   var playlist_len = playlist.length;
   var playlist_i = 0;
   while (playlist_len > 0) {
   playlist_out += '<tr><td>' + playlist[playlist_i][0] + '</td>';
   playlist_out += '<td><a class="w3-" href="javascript:playMediaNow(\'' + media_id + '\',\'' + media_path + playlist[playlist_i][2] + '\')">' + playlist[playlist_i][1] + '</a></td>';
   playlist_out += '<td>' + playlist[playlist_i][3] + '</td>';
   playlist_out += '</tr>';
   playlist_len --;
   playlist_i ++;
   }
   playlist_out += '</table>';
   return(playlist_out);
}

/* Playlists */
var audio_path = '/content/audio/';
var video_path = '/content/video/';

var pl_kids =
[
['Spieluhr 1', 'Melodie 1', '96kbs_muz_shkatulka_lalilu.mp3', '00:20' ],
['Spieluhr 2', 'Melodie 2', '96kbs_muz_shkatulka_hapybirdhtday.mp3', '00:18' ]
];
document.getElementById('playlist_kids').innerHTML = createListTable(pl_kids, audio_path, 'audio_kids');

var vid_kids =
[
['Musikschule Ismaning', 'Faschingskonzert 2020', 'faschingskonzert_ismaning_20200217.mp4', '00:20' ],
['Musikschule Ismaning 1', 'Faschingskonzert 2020 1', 'faschingskonzert_ismaning_20200217_1.mp4', '01:28' ]
];
document.getElementById('playlist_kids_vid').innerHTML = createListTable(vid_kids, video_path, 'video_kids');
</script>

Готово.