[RUBY] [Comment insérer une vidéo dans un hameau avec Rails]
Si vous pouvez insérer une vidéo, vous pouvez décorer votre site Web d'une manière à la mode et cool. Cette fois, je vais vous expliquer en détail comment insérer une vidéo dans un hameau avec Rails.
Créer un dossier de vidéos dans le dossier public
Cliquez sur Créer un nouveau dossier dans l'éditeur de texte pour créer un dossier vidéo public.
Placez le fichier vidéo que vous souhaitez insérer sous le dossier vidéo
Apportez le fichier vidéo que vous souhaitez utiliser sous le dossier vidéo.
À ce stade, utilisez mp4 </ font> ** comme extension du fichier vidéo! En effet, la plupart des navigateurs prennent actuellement en charge mp4. Cette fois, nous utiliserons un fichier avec l'extension mp4, sample_video.mp4.
Décrivez ce qui suit en haml
ruby:◯◯.html.haml
= video_tag("/videos/sample_video.mp4", autoplay: true, loop: true, muted: true, class: 'video')
Je vais expliquer un par un. = video_tag Il est possible de rappeler des fichiers vidéo à l'aide de balises vidéo.
/videos/sample_video.mp4 Spécifiez le dossier auquel faire référence.
autoplay: true Il sera possible de jouer automatiquement lorsque la page sera actualisée.
loop: true À la fin de la vidéo, elle sera lue à plusieurs reprises depuis le début.
muted: true Joue en silence.
Ensuite, la vidéo sera affichée sur le site Web comme ceci!
Comme cette fois, si vous spécifiez la classe, vous pouvez changer la disposition de la vidéo avec scss!
À la fin
Insérer une vidéo était relativement facile, mais cela m'a pris du temps pour faire une vidéo car c'était ma première fois lol La vidéo a été créée avec iMovie sur Mac!
** En guise de mise en garde Si la taille du fichier vidéo est trop grande, il ne sera pas affiché, donc enregistrez-le aussi petit que possible. ** **
Veuillez vous référer à cet article et insérer une vidéo pour créer un site Web élégant et cool!
Articles référencés [Balise vidéo] Résumé détaillé de l'intégration d'une vidéo au format HTML (le site est écrit en HTML) https://webliker.info/52510/