1
votes

Comment lire une vidéo dans une page HTML

J'essaie de lire une vidéo mp4 sur ma page HTML, j'ai cherché sur le Web et j'ai constaté qu'en HTML5 je peux le faire avec la balise video comme celle-ci ci-dessous

<video width="320" height="240" autoplay>
  <source src="D:\Video\samplevideo.mp4" type="video/mp4">
</video>
  • Mon principal problème est que ma vidéo est stockée sur mon ordinateur local à un endroit donné, comment puis-je l'appeler à partir de ce chemin
  • Dans mon système, il se trouve dans le lecteur D , je veux donc l'appeler à partir de là
  • Je suis nouveau dans ce domaine, donc je ne sais pas si je le fais de la bonne manière; mon approche est-elle correcte?
  • Mon exigence est de lire automatiquement la vidéo sur ma page Web

Je fais comme ça

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
</video>

D: \ Video \ samplevideo.mp4 est le chemin de mon fichier et samplevideo.mp4 est le nom de la vidéo

Sur Chrome, il affiche l'erreur Impossible de charger la ressource locale: file: /// D: /Video/samplevideo.mp4

Et sur Firefox Toutes les ressources candidates n'ont pas pu se charger. Chargement du média suspendu.

Modifier

Mon objectif principal est de lire une vidéo sur une page Web.

J'ai besoin de lire une vidéo sur le Web ( Page HTML) lorsque la page est chargée, j'ai cette vidéo dans mon système à D: \ Video \ samplevideo.mp4 ce chemin, comment puis-je lire cette vidéo lorsque la page est chargée.

Image de la console


15 commentaires

Votre vidéo se charge-t-elle correctement? Consultez la console de votre navigateur pour toute erreur.


voir stackoverflow.com/questions/8885701/...


@randomSoul non il ne charge pas il affiche une erreur Impossible de charger la ressource locale: file: /// D: /Video/samplevideo.mp4 sur crome et on fire fox Toutes les ressources candidates ont échoué charger. Chargement du média suspendu.


utilisez file: /// D: /Video/samplevideo.mp4 ou host sur un serveur Web et donnez l'URL


@DevsiOdedra que j'ai déjà vu, il est sur le point de sélectionner la vidéo à partir du lecteur local puis de jouer


Peut-être que cela vous aidera à stackoverflow.com/questions/39007243/...


@PDKPavanKumar hé cela ne fonctionne pas, et je fais ce projet sur le serveur local en utilisant tomcat donc aucun moyen de l'héberger sur le serveur Web, je dois appeler ce fichier à partir du système local, sur quel système cette page est chargée


@manishthakur pourquoi y a-t-il 3 barres obliques au lieu de 2?


@xmaster je le fais comme s'il vous plaît vérifier ma modification J'ai téléchargé l'image de la console


vérifiez ce lien


"serveur local utilisant tomcat donc aucun moyen de l'héberger sur le serveur web" - Tomcat est un serveur Web . Que saisissez-vous dans la barre d'adresse de votre navigateur pour afficher la page?


@JonP http: // localhost: 8080 / MyWeb / test.html ceci est mon URL pour ouvrir la page, je pense que je le fais mal si vous pouvez m'aider avec une approche ou des conseils. être très utile


@xmaster c'est autre chose que ce que j'essaye de faire


En général, vous ne pouvez pas lire de contenu local , c'est l'erreur que vous obtenez. C'est un problème de sécurité. Un serveur Web ne doit avoir aucune information sur le système de fichiers des utilisateurs (clients), là encore une mesure de sécurité très importante. Comment votre serveur sait-il que le client a un fichier à cet emplacement? Vous pouvez le faire, mais un autre utilisateur peut même ne pas avoir de lecteur D , encore moins un lecteur D avec un répertoire video .


yup maintenant je comprends ça, je dois mettre la vidéo dans mon projet


5 Réponses :


-1
votes

vous devez mettre un texte alternatif comme celui-ci pour vérifier si votre navigateur ou votre smartphone prend en charge la lecture automatique des vidéos.

comme ceci:

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

```


2 commentaires

hé je fais la même chose que vous copiez coller la réponse de google


Essayez également d'utiliser cette syntaxe pour une alternative:



1
votes

Essayez ce code

 <video muted autoplay loop class="video video js-video" id="hero-vid" poster="video/desktop-screen-banner.png">
    <source src="video/movie.webm" type="video/webm">
    <source src="video/movie.mp4" type="video/mp4">
    <source src="video/movie.ogg" type="video/ogg">
</video>


10 commentaires

hé je fais de même mon principal problème est que le fichier vidéo est dans mon PC local alors que dois-je mettre à la place de src = "movie.mp4" , pouvez-vous m'expliquer où ce fichier movie.mp4 est ?


Créez le dossier vidéo. la vidéo est requise en 3 formats 1.) webm 2.) mp4 3.) ogg


J'ai déjà créé un dossier vidéo qui ne se trouve pas sur mon PC dans mon projet et je peux lire n'importe lequel d'entre eux sur ma page Web sans avoir besoin d'avoir les trois formats


une fois que vous essayez le chemin relatif.


Vous dites de créer un dossier vidéo dans mon projet et de mettre cette vidéo à l'intérieur?


Mais je ne peux pas créer de dossier dans le répertoire de mon projet car à l'avenir, si l'utilisateur souhaite modifier la vidéo, je dois accéder à mon code, c'est pourquoi j'essaie de créer un dossier dans mon système local


Alors il n'y a pas d'autre option. Si vous téléchargez un lecteur vidéo comme YouTube ou Vimeo, vous devriez alors changer le lien ou changer la vidéo locale dans le dossier.


La vidéo locale signifie que vous devez jouer sans télécharger. Vous pouvez lire la vidéo de votre PC local dans une page Web


continuons cette discussion dans le chat .


Cela ne fonctionne pas sur Chrome car j'utilise les 3 formats



0
votes

Pour les bases de l'obtention de ce travail, déplacez D: /Video/samplevideo.mp4 vers le même emplacement que votre fichier html.

Puis changez votre code en:

< pre> XXX

Assurez-vous que Tomcat est configuré pour serveur le type MIME ou l'extension .mp4 .

Ensuite, vous devriez lire comment les chemins fonctionnent en HTML .


2 commentaires

Cette vidéo que je ne peux pas déplacer vers mon emplacement HTML, je dois l'appeler à partir d'un fichier / dossier uniquement car ce sera un utilisateur dynamique qui changera les vidéos selon les exigences


Notez l'erreur Impossible de charger la ressource locale: file: /// D: /Video/samplevideo.mp4 - Vous n'êtes pas autorisé à charger les ressources locales. L'utilisateur ne pourra pas lire de vidéo sur sa machine sur une page servie par votre serveur Web (tomcat). Comment l'utilisateur choisit-il par ailleurs de générer dynamiquement la vidéo? Veuillez développer votre question car je pense que vous avez un problème XY



0
votes

Je peux vous donner quelques conseils. Premièrement, vous pouvez utiliser le chemin absolu sur la vidéo, placer le fichier vidéo sur le serveur, puis vous pouvez obtenir un chemin tel que www.xxx.com/movie. mp4 , et vous pouvez écrire le code sur votre page HTML , comme ceci:

//js code
function play(fn){
  var str='<object id="MediaPlayer" height="300" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" style="width:70%"><param name="URL" value=\''+fn+'\'\/><param name="autoStart" value="1"\/><param name="balance" value="0"\/><param name="baseURL" value=""\/><param name="currentPosition" value="0"\/><param name="currentMarker" value="0"\/><param name="defaultFrame" value=""\/><param name="enabled" value="1"\/><param name="enableErrorDialogs" value="0"\/><param name="enableContextMenu" value="0"\/><param name="fullScreen" value="0"\/><param name="invokeURLs" value="1"\/><param name="mute" value="0"\/><param name="playCount" value="1"\/><param name="rate" value="1"\/><param name="stretchToFit" value="0"\/><param name="uiMode" value="full"\/><param name="volume" value="100"\/><param name="windowlessVideo" value="1"\/><\/object>';
   document.getElementById('playhere').innerHTML=str;
}
// that's your video file location
 play('D:\\Video\\samplevideo.mp4')

Deuxièmement, vous pouvez placer votre fichier vidéo dans le répertoire comme même que l'emplacement de la page HTML.Par exemple, si votre page HTML dans le répertoire qui a appelé test .vous pouvez créer un répertoire qui a appelé src , et vous pouvez écrire le code sur votre page HTML , comme ceci:

//the HTML code
<div id="playhere"></div>

Troisièmement, vous pouvez utiliser la balise input pour télécharger la vidéo locale fichier, le code HTML comme ci-dessous:

     var input = document.getElementById('myInput'), 
         video = document.getElementById('myVideo');
        input.onchange = function () {
            var file = this.files[0];
            var url = URL.createObjectURL(file);
            video.innerHTML = '<source src="' + url + '" type="video/mp4">';
        }

le code js comme ci-dessous:

  <input type="file" id="myInput"/>
  <video controls autoplay></video>

Quatrièmement, utilisez la balise object . Vous pouvez écrire le code, comme ceci:

<video width="320" height="240" autoplay>
  <source src="./src/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<video width="320" height="240" autoplay>
  <source src="www.xxx.com/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>


2 commentaires

hé votre réponse suggère de télécharger d'abord la vidéo, ici j'ai une vidéo dans mon système (PC), je dois la lire


Mon quatrième conseil peut vous aider.



0
votes

Pouvez-vous essayer ceci

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Suivez également ce lien pour plus d'informations.

http://mrbool.com/how-to-add-and-play-videos-in- html / 26171


8 commentaires

oui je fais la même chose mais mon fichier vidéo est dans mon ordinateur local pas dans mon projet alors que dois-je mettre à sre = "movie.mp4"


vous pouvez ajouter le chemin approprié.


1. Faites un clic droit sur le fichier vidéo. puis allez aux propriétés


2. Ensuite, vous pouvez prendre l'emplacement du fichier. Et ajoutez-les à votre lièvre src = "".


veuillez consulter cette référence mrbool.com/how-to- ajouter-et-lire des vidéos au format html / 26171 . J'espère que ceci vous aidera.


@manishthakur comment vous rendez ce fichier? créer simplement un fichier html puis double clcikcking ce fichier ou exécuter ce fichier avec n'importe quel serveur Web comme xamp ou wamp?


@NeerajAmoli J'utilise Tomcat


@manishthakur téléchargez votre vidéo dans ce dossier où se trouve le fichier html, puis essayez de donner le nom de la vidéo à l'attribut src.