Vídeo tutoriales

Bienvenid@s a el área de video tutoriales

Vídeo tutoriales de Python

Vídeo tutoriales de SuperCollider

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.accordion-container {
  width: 100%;
  max-width: 900px;
  margin: auto;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\02795';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.video-container video {
  width: 100%;
  height: auto;
}

.video-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.video-controls button {
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  font-size: 0.8em; 
}

.video-controls button:focus {
  outline: none;
}

.video-controls button:active {
  color: red;
}

#progress-bar1, #progress-bar2 {
  width: 100%;
  height: 5px;
  background: #ddd;
  cursor: pointer;
}

#progress-bar1 div, #progress-bar2 div {
  height: 100%;
  background: grey;
}
</style>
</head>
<body oncontextmenu="return false;">

<div class="accordion-container">
  <button class="accordion">Video 1</button>
  <div class="panel">
      <!-- Video player code starts here -->
	<div class="video-container">
  	<video id="videoPlayer1">
	    <source src="s/python1c.mp4" type="video/mp4">
	    Tu navegador no soporta el vídeo de HTML5
	  </video>
	  <div id="progress-bar1" onclick="seek(event, 'videoPlayer1', 'progress-bar1')">
	    <div></div>
	  </div>
	  <div class="video-controls">
	    <button onclick="playPause('videoPlayer1')"><i class="fas fa-play"></i>/<i class="fas fa-pause"></i></button>
	    <button onclick="stopVideo('videoPlayer1')"><i class="fas fa-stop"></i></button>
	    <button onclick="fastForward('videoPlayer1')"><i class="fas fa-forward"></i></button>
	    <button onclick="rewind('videoPlayer1')"><i class="fas fa-backward"></i></button>
	    <button onclick="changeSpeed(0.5, 'videoPlayer1')"><i class="fas fa-tachometer-alt"></i> 0.5x</button>
	    <button onclick="changeSpeed(1, 'videoPlayer1')"><i class="fas fa-tachometer-alt"></i> Normal</button>
	    <button onclick="changeSpeed(2, 'videoPlayer1')"><i class="fas fa-tachometer-alt"></i> 2x</button>
	  </div>
	</div>
	<!-- Video player code finishes here -->
  </div>
  
  <button class="accordion">Video 2</button>
  <div class="panel">
      <!-- Video player code starts here -->
	<div class="video-container">
  	<video id="videoPlayer2">
	    <source src="s/python1c.mp4" type="video/mp4">
	    Tu navegador no soporta el vídeo de HTML5
	  </video>
	  <div id="progress-bar2" onclick="seek(event, 'videoPlayer2', 'progress-bar2')">
	    <div></div>
	  </div>
	  <div class="video-controls">
	    <button onclick="playPause('videoPlayer2')"><i class="fas fa-play"></i>/<i class="fas fa-pause"></i></button>
	    <button onclick="stopVideo('videoPlayer2')"><i class="fas fa-stop"></i></button>
	    <button onclick="fastForward('videoPlayer2')"><i class="fas fa-forward"></i></button>
	    <button onclick="rewind('videoPlayer2')"><i class="fas fa-backward"></i></button>
	    <button onclick="changeSpeed(0.5, 'videoPlayer2')"><i class="fas fa-tachometer-alt"></i> 0.5x</button>
	    <button onclick="changeSpeed(1, 'videoPlayer2')"><i class="fas fa-tachometer-alt"></i> Normal</button>
	    <button onclick="changeSpeed(2, 'videoPlayer2')"><i class="fas fa-tachometer-alt"></i> 2x</button>
	  </div>
	</div>
	<!-- Video player code finishes here -->
  </div>
  
  <!-- Add more as needed -->
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

function playPause(id) { 
    var video = document.getElementById(id);
    if (video.paused) 
        video.play(); 
    else 
        video.pause(); 
}

function stopVideo(id) {
  var video = document.getElementById(id);
  video.pause();
  video.currentTime = 0;
}

function fastForward(id) {
  var video = document.getElementById(id);
  video.currentTime += 10;
}

function rewind(id) {
  var video = document.getElementById(id);
  video.currentTime -= 10;
}

function changeSpeed(speed, id) {
  var video = document.getElementById(id);
  video.playbackRate = speed;
}

function seek(event, videoId, progressBarId) {
  var video = document.getElementById(videoId);
  var progressBar = document.getElementById(progressBarId);
  var percent = event.offsetX / progressBar.offsetWidth;
  video.currentTime = percent * video.duration;
}

var video1 = document.getElementById('videoPlayer1');
var progressBar1 = document.getElementById('progress-bar1');

video1.addEventListener('timeupdate', function() {
  var progress = video1.currentTime / video1.duration * 100;
  progressBar1.children[0].style.width = progress + "%";
});

var video2 = document.getElementById('videoPlayer2');
var progressBar2 = document.getElementById('progress-bar2');

video2.addEventListener('timeupdate', function() {
  var progress = video2.currentTime / video2.duration * 100;
  progressBar2.children[0].style.width = progress + "%";
});

</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.accordion-container {
  width: 100%;
  max-width: 900px;
  margin: auto;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\02795';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.video-container video {
  width: 100%;
  height: auto;
}

.video-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.video-controls button {
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  font-size: 0.8em; 
}

.video-controls button:focus {
  outline: none;
}

.video-controls button:active {
  color: red;
}

#progress-bar1, #progress-bar2 {
  width: 100%;
  height: 5px;
  background: #ddd;
  cursor: pointer;
}

#progress-bar1 div, #progress-bar2 div {
  height: 100%;
  background: grey;
}
</style>
</head>
<body oncontextmenu="return false;">

<div class="accordion-container">
  <button class="accordion">Video 1</button>
  <div class="panel">
      <!-- Video player code starts here -->
	<div class="video-container">
  	<video id="videoPlayer1">
	    <source src="s/python1c.mp4" type="video/mp4">
	    Tu navegador no soporta el vídeo de HTML5
	  </video>
	  <div id="progress-bar1" onclick="seek(event, 'videoPlayer1', 'progress-bar1')">
	    <div></div>
	  </div>
	  <div class="video-controls">
	    <button id="playPauseBtn1" onclick="playPause1()"><i class="fas fa-play"></i></button>
	    <button onclick="stopVideo('videoPlayer1')"><i class="fas fa-stop"></i></button>
	    <button onclick="fastForward('videoPlayer1')"><i class="fas fa-forward"></i></button>
	    <button onclick="rewind('videoPlayer1')"><i class="fas fa-backward"></i></button>
	    <button onclick="changeSpeed(0.5, 'videoPlayer1')"><i class="fas fa-tachometer-alt"></i> 0.5x</button>
	    <button onclick="changeSpeed(1, 'videoPlayer1')"><i class="fas fa-tachometer-alt"></i> Normal</button>
	    <button onclick="changeSpeed(2, 'videoPlayer1')"><i class="fas fa-tachometer-alt"></i> 2x</button>
	  </div>
	</div>
	<!-- Video player code finishes here -->
  </div>
  
  <button class="accordion">Video 2</button>
  <div class="panel">
      <!-- Video player code starts here -->
	<div class="video-container">
  	<video id="videoPlayer2">
	    <source src="s/python1c.mp4" type="video/mp4">
	    Tu navegador no soporta el vídeo de HTML5
	  </video>
	  <div id="progress-bar2" onclick="seek(event, 'videoPlayer2', 'progress-bar2')">
	    <div></div>
	  </div>
	  <div class="video-controls">
	    <button id="playPauseBtn2" onclick="playPause2()"><i class="fas fa-play"></i></button>
	    <button onclick="stopVideo('videoPlayer2')"><i class="fas fa-stop"></i></button>
	    <button onclick="fastForward('videoPlayer2')"><i class="fas fa-forward"></i></button>
	    <button onclick="rewind('videoPlayer2')"><i class="fas fa-backward"></i></button>
	    <button onclick="changeSpeed(0.5, 'videoPlayer2')"><i class="fas fa-tachometer-alt"></i> 0.5x</button>
	    <button onclick="changeSpeed(1, 'videoPlayer2')"><i class="fas fa-tachometer-alt"></i> Normal</button>
	    <button onclick="changeSpeed(2, 'videoPlayer2')"><i class="fas fa-tachometer-alt"></i> 2x</button>
	  </div>
	</div>
	<!-- Video player code finishes here -->
  </div>
  
  <!-- Add more as needed -->
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

function playPause(id) { 
    var video = document.getElementById(id);
    if (video.paused) 
        video.play(); 
    else 
        video.pause(); 
}

function stopVideo(id) {
  var video = document.getElementById(id);
  video.pause();
  video.currentTime = 0;
}

function fastForward(id) {
  var video = document.getElementById(id);
  video.currentTime += 10;
}

function rewind(id) {
  var video = document.getElementById(id);
  video.currentTime -= 10;
}

function changeSpeed(speed, id) {
  var video = document.getElementById(id);
  video.playbackRate = speed;
}

function seek(event, videoId, progressBarId) {
  var video = document.getElementById(videoId);
  var progressBar = document.getElementById(progressBarId);
  var percent = event.offsetX / progressBar.offsetWidth;
  video.currentTime = percent * video.duration;
}

function playPause1() { 
    var playPauseBtn = document.getElementById("playPauseBtn1");
    if (video1.paused) {
        video1.play();
        playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
    } else {
        video1.pause();
        playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
    } 
}

var video1 = document.getElementById('videoPlayer1');
var progressBar1 = document.getElementById('progress-bar1');

video1.addEventListener('timeupdate', function() {
  var progress = video1.currentTime / video1.duration * 100;
  progressBar1.children[0].style.width = progress + "%";
});

var video2 = document.getElementById('videoPlayer2');
var progressBar2 = document.getElementById('progress-bar2');

video2.addEventListener('timeupdate', function() {
  var progress = video2.currentTime / video2.duration * 100;
  progressBar2.children[0].style.width = progress + "%";
});

function playPause2() { 
    var playPauseBtn = document.getElementById("playPauseBtn2");
    if (video2.paused) {
        video2.play();
        playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
    } else {
        video2.pause();
        playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
    } 
}

</script>

</body>
</html>