Navegação por capítulos

Divida seu vídeo em capítulos

Instruções

Adicione capítulos em seus vídeos e facilite a navegação de seus usuários. O projeto que contém os videos deve ter entrega RTMP para que este recurso funcione adequadamente.

Opções

Preview

Capítulo 1 Capítulo 2 Capítulo 3 Capítulo 4

Novo embed

<div class="row">
	<div class="col-xs-4 col-md-4" id="player"></div>
	<div class="col-xs-3 col-md-3 pull-right">
		<div id='list' class="list-group">
			<a href="javascript:void(0)" class="samba-playlist-trigger list-group-item active" data-time="0">Capítulo 1</a>
			<a href="javascript:void(0)" class="samba-playlist-trigger list-group-item" data-time="18">Capítulo 2</a>
			<a href="javascript:void(0)" class="samba-playlist-trigger list-group-item" data-time="29">Capítulo 3</a>
			<a href="javascript:void(0)" class="samba-playlist-trigger list-group-item" data-time="42">Capítulo 4</a>
		</div>
	</div>
</div>
<script type="text/javascript" samba-player-api="player" src="https://player.sambatech.com.br/v3/samba.player.api.js"></script>
<script type="text/javascript">// <![CDATA[
document.getElementById("list").onclick = function(e) {
	player.getStatus(function(obj){
		if(obj.status.hasOwnProperty('state')) {
			e = e || event;

			var tg = e.target || e.srcElement;

			// Avoids Safari bug
			if (tg.nodeType == 3)
				tg = tg.parentNode;

			document.querySelector('.samba-playlist-trigger.list-group-item.active').className = 'samba-playlist-trigger list-group-item';
			tg.className = "samba-playlist-trigger list-group-item active";

			seekTo(tg);
		}
	});
};

function seekTo(el) {
	player.getStatus(function(obj){
		if(obj.status.hasOwnProperty('state')) {
			try {
				player.seek(el.getAttribute('data-time'));
			}
			catch(e){
			}
		}
	});

}

function cuepointHandler(cuepoint) {
	document.querySelector('.samba-playlist-trigger.list-group-item.active').className = 'samba-playlist-trigger list-group-item';

	var elms = document.getElementById("list").querySelectorAll('.samba-playlist-trigger.list-group-item');
	for (var i = 0; i < elms.length; ++i) {
		if (elms[i].getAttribute("data-time") == parseInt(cuepoint.eventParam.time)) {
			elms[i].className = "samba-playlist-trigger list-group-item active";
		}
	}
}

var player = new SambaPlayer("player", {});
// ]]></script>

Obs: Alguns editores de conteúdo como o Wordpress e Ghost podem alterar o código colado. Certifique-se se o código está igual ao informado aqui e, se possível, coloque o Javascript em um arquivo externo.