Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    problema sul cambiamento mp4 a m3u8

    buonasera a tutti, ho un problema sul mio js, non sto riuscendo ad abilitire i video m3u8, il mio sj sta impostato su url .mp4, qualcuno sarebbe cosi gentile da spiegarmi comne potrei fare.. grazie mille in anticipo...

    codice:
    // let's select all required tags or elementsconst mainVideo = document.querySelector('#main-Video');
    const musicList = document.querySelector('.music-list');
    const playlist = document.getElementById('playlist');
    const AllLessons = document.querySelector('.AllLessons');
    const videoTitle = document.querySelector('.title');
    
    
    
    
    const ulTag = document.querySelector("ul");
    AllLessons.innerHTML = `${allVideos.length} Puntate`
    
    
    
    
    let musicIndex = 1;
    window.addEventListener('load',()=>{
       loadMusic(musicIndex);
       playingNow();
    })
    function playMusic(){
       mainVideo.play();
       playlist.classList.add('active')
    }
    function loadMusic(indexNumb){
       mainVideo.src = `${allVideos[indexNumb - 1].src}.mp4`;
       videoTitle.innerHTML = `${indexNumb}. ${allVideos[indexNumb - 1].name}`
       
    }
    
    
    for(let i = 0; i < allVideos.length; i++){
       let liTag = `<li li-index="${i + 1}">
          <div class="row">
             <span>${i + 1}. ${allVideos[i].name}</span>
          </div>
          <video class="${allVideos[i].id}" src="${allVideos[i].src}.mp4" style="display: none;" title="${allVideos[i].name}"></video>
          <span id="${allVideos[i].id}" class="duration"></span>
       </li>`;
       playlist.insertAdjacentHTML('beforeend',liTag); 
    
    
       let liVideoDuration = ulTag.querySelector(`#${allVideos[i].id}`)
       let liVideoTag = ulTag.querySelector(`.${allVideos[i].id}`);
       
    
    
       liVideoTag.addEventListener("loadeddata", ()=>{
          let videoDuration = liVideoTag.duration;
          let totalMin = Math.floor(videoDuration / 60);
          let totalSec = Math.floor(videoDuration % 60);
          // if totalSec is less then 10 then add 0 at the beginging
          totalSec < 10 ? totalSec = "0"+ totalSec : totalSec
          liVideoDuration.innerText = `${totalMin}:${totalSec}`;
          // adding t duration attribe which we'll use below
          liVideoDuration.setAttribute("t-duration", `${totalMin}:${totalSec}`);
       })  
    }
    // let's work on play particular song on click
    const allLiTags = playlist.querySelectorAll('li');
    function playingNow(){
       for(let j = 0; j<allVideos.length; j++){
          if(allLiTags[j].classList.contains('playing')){
             allLiTags[j].classList.remove("playing")
          }
          if(allLiTags[j].getAttribute('li-index')==musicIndex){
             allLiTags[j].classList.add('playing')
          }
          // adding onclick attribute in all li tags
          allLiTags[j].setAttribute("onclick", "clicked(this)")
       }
    }
    
    
    function clicked(element){
       // getting li index of particular clicked li tag
       let getIndex = element.getAttribute("li-index");
       musicIndex = getIndex;
       loadMusic(musicIndex);
       playMusic();
       playingNow();
    }

  2. #2
    nessuno sa come si fa?

  3. #3
    Utente di HTML.it L'avatar di abellos
    Registrato dal
    Feb 2002
    Messaggi
    383
    ciao non conosco come funziona lo script ma a prima vista direi che devi campiare l'estensione qui

    codice:
    function loadMusic(indexNumb){
       mainVideo.src = `${allVideos[indexNumb - 1].src}.mp4`;
       videoTitle.innerHTML = `${indexNumb}. ${allVideos[indexNumb - 1].name}`
       
    }
    e qui
    codice:
    <video class="${allVideos[i].id}" src="${allVideos[i].src}.mp4" style="display: none;" title="${allVideos[i].name}"></video>
    ma non ho idea se funzionerà
    Da un grande potere derivano grandi responsabilità

  4. #4
    codice:
    mainVideo.src = `${allVideos[indexNumb - 1].src}.mp4`;
    Ovviamente se imposti hard coded che sia un file mp4, non hai modo di riprodurre altro...
    Dovrai rendere dinamica l'estensione, o tramite la allVideo che dovrà contenere, oltre la src, anche l'estensione (chessò ext), o in qualche altro modo che ti torni comodo.

    Un appunto, vedendo il codice parziale che hai postato: perchè crei TUTTA la lista dei video in una serie di div che contengono un tag video nascosto? Non ti conviene creare il tag video solo quando fai click sull'elemento che vuoi ascoltare, dandogli un id "standartd" (es:video_index, dove index è appunto l'indice che recuperi e usi in loadMusic())? Così quell'index te lo salvi da qualche parte in una variabile e ogni volta che clicchi un elemento della playlist, TOGLI il div precedente e lo ricaricihi col nuovo contenuto....

    Oppure, ancora più elegante, usi un solo div per il video (non per la lista, proprio per il video) che poi popoli dinamicamente in base a dove clicchi...

  5. #5
    pultroppo vorrei creare una lista hls in una solo pagina, tipo playlist, ora ti faccio vedere il mio progetto finale come dovrebbe uscire..
    final.jpg

  6. #6
    Quote Originariamente inviata da Zucheccuu Visualizza il messaggio
    pultroppo vorrei creare una lista hls in una solo pagina, tipo playlist, ora ti faccio vedere il mio progetto finale come dovrebbe uscire..
    Ok ma non mi riferivo alla lista dei titoli, mi riferivo ai tag video...
    In pratica questo
    codice:
    for(let i = 0; i < allVideos.length; i++){
       let liTag = `<li li-index="${i + 1}">
          <div class="row">
             <span>${i + 1}. ${allVideos[i].name}</span>
          </div>
          <video class="${allVideos[i].id}" src="${allVideos[i].src}.mp4" style="display: none;" title="${allVideos[i].name}"></video>
          <span id="${allVideos[i].id}" class="duration"></span>
       </li>`;
       playlist.insertAdjacentHTML('beforeend',liTag);
    il tag video, secondo me, è inutile che venga ripetuto per tutti i titoli. Te ne basta uno (quello "centrale" nello screenshot che hai allegato) e poi dinamicamente cambi la src e gli altri parametri.
    Avrai quindi la tua lista nel ciclo ma SENZA il tag video
    codice:
    for(let i = 0; i < allVideos.length; i++){
       let liTag = `<li li-index="${i + 1}">
          <div class="row">
             <span>${i + 1}. ${allVideos[i].name}</span>
          </div>
          <span id="${allVideos[i].id}" class="duration"></span>
       </li>`;
       playlist.insertAdjacentHTML('beforeend',liTag);
    Detto questo, resta il problema principale del file mp4 o m3u8...
    Tenuto comunque conto che m3u8 è una playlist e non un file multimediale, non cambia molto, devi rendere tu la src del video adeguata, come spiegato

  7. #7
    sto provando in tanti modi ma non vuole proprio che i file m3u8 partino

  8. #8
    Quote Originariamente inviata da Zucheccuu Visualizza il messaggio
    sto provando in tanti modi ma non vuole proprio che i file m3u8 partino
    Ma se ti crei una paginetta statica per fare le prove e ci metti un file m3u, te lo riproduce?
    Ti ricordo che m3u8 è una playlist, non un file multimediale...

  9. #9
    no ho provato a fare un file m3u8 ma pultroppo non parte

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.