Como adicionar e reproduzir vídeos em uma página da web usando HTML?

HTML (Hypertext Markup Language) é uma linguagem de marcação usada para criar páginas da web e inclui recursos para incorporar conteúdo multimídia, como vídeos. Usando HTML, adicionar e reproduzir vídeos em uma página da web é uma maneira de exibir conteúdo de vídeo em um site. Dessa forma, os proprietários de sites podem aprimorar a experiência do usuário, envolver visitantes e comunicar informações de maneira mais dinamicamente e convincente.

Este artigo demonstra como adicionar e reproduzir vídeos em um site usando:

"" Marcação
"" Marcação
““" Marcação</strong></li> <li><strong> "" Marcação</strong></li> <li><strong>Bônus: incorporando vídeos da fonte on -line como o YouTube</strong></li> </ul> <p>Método 1: Usando "" Tag</p> <p>Para exibir o vídeo na página da web, o método mais recomendado é o “" marcação. Esta tag usa o "”Tag como uma criança que recebe o endereço e o tipo de arquivo. Depois de fornecer a fonte do vídeo, os usuários podem exibi -lo no site:</p> <br><h1> Alimentado por Linuxhint </h1><br><video controls width="50%" height="50%"><br><source src="sea.mp4" type="video/mp4"/><br></video><br> <p>No trecho de código acima, o <strong>“” Tag usa “controles”, “largura” e “altura”</strong> atributos para adicionar controles para o vídeo, juntamente com sua altura e largura. No entanto, o <strong>""</strong> tag tem muito mais atributos para realizar funcionalidade específica. </p> <p>Depois de executar o código, a página da web se parece com o seguinte:</p> <p> <br>A saída acima mostra que o vídeo foi adicionado e está sendo reproduzido na página da web.</p> <p>Método 2: Usando "" Tag</p> <p>A tag de objeto também pode ser utilizada para exibir o vídeo em uma página da web. Como cria um contêiner no qual os arquivos de mídia e aplicativos plug-in podem ser inseridos. Além disso, consome menos linhas de código e é fácil de modificar:</p> <br><h1>Alimentado por Linuxhint</h1><br><br><br><object data="sea.mp4" height="255px" width="450px" ></object><br> <p>No trecho de código acima:</p> <p>- Para inserir o vídeo usando o “”Tag, insira o caminho do vídeo como um valor para o seu“<strong>dados</strong>”Atributo.</p> <p>- Então, utilize o “<strong>altura "e" largura</strong>”Atributos para definir as dimensões/tamanho do vídeo na página da web.</p> <p>Depois de executar o código acima:</p> <p>A saída confirma que o vídeo está sendo reproduzido na janela.</p> <p>Método 3: Usando “<iframe>" Marcação</p> <p>O "<strong><iframe></strong>”A tag pode ser utilizada para adicionar e reproduzir vídeos em uma página da web devido ao seu forte vínculo com os documentos dos pais. Ajuda a incorporar conteúdo de terceiros na página da web, essa tag é usada principalmente em contraste com as tags de incorporação e objeto. O código para adicionar vídeo do diretório local no arquivo html é:</p> <br><h1>Alimentado por Linuxhint</h1><br><br><br><iframe src="sea.mp4" height="255px" width="450" >

No trecho de código acima:

Primeiro, a divisão dos pais está sendo estilizada para exibir os elementos contendo no centro da página da web.

Então o "</strong>" marcação "<strong>src</strong>”O atributo é utilizado para armazenar o caminho do vídeo.</li> <li>Depois disso, definir o tamanho do vídeo “<strong>altura</strong>" e "<strong>largura</strong>Atributos dos “<strong><iframe></strong>”Tag são usados.</li> </ul> <p>Após a execução do código acima, a página da web se parece com a seguinte:</p> <p>A saída acima exibe que o vídeo foi adicionado e reproduzido no site.</p> <p>Método 4: Usando a tag “”</p> <p>O "”A tag também pode ser utilizada para adicionar e reproduzir vídeos na página da web. Esta tag também pode ser usada para exibir imagens e arquivos HTML:</p> <br><h1>Alimentado por Linuxhint</h1><br><br><br><embed type="video/mp4" src="sea.mp4" width="400" height="300"><br> <p>Neste código,</p> <p>- Um vídeo é incorporado em uma página HTML com o arquivo de origem “<strong>mar.MP4</strong>”E uma largura e altura de 400 e 300 pixels, respectivamente.</p> <p>- O vídeo está sendo exibido dentro de um recipiente centrado com o título “<strong>Alimentado por Linuxhint</strong>”Acima dele.</p> <p>Depois de executar o trecho de código acima, a página da web se parece com a seguinte:</p> <p>O GIF acima ilustra que o vídeo é adicionado e reproduzido na página da web usando o “" marcação.</p> <p>Bônus: incorporando vídeos da fonte on -line como o YouTube</p> <p>Para incorporar o vídeo de um site de terceiros como o YouTube, o “<strong><iframe>" e "</strong>”Tags podem ser muito úteis. Essas tags permitem que os desenvolvedores incorporem vídeos diretamente no site sem a necessidade de baixar esses vídeos. Para executar isso, é necessário o link de vídeo incorporado, que pode ser acessado seguindo o curto guia abaixo:</p> <ul> <li>Primeiro, selecione o vídeo do YouTube que o usuário deseja exibir em sua página da web. Em seguida, abra a lista de opções para esse vídeo. Depois disso, encontre e selecione o “<strong>Compartilhar</strong>”Opção:</li> </ul> <ul> <li>Depois disso, a janela curta é aberta e selecione o “<strong>Embutir</strong>”Opção daqui:</li> </ul> <ul> <li>Depois disso, o link de vídeo incorporado é gerado e copie o URL:</li> </ul> <p>Depois de copiar o “<strong>Embutir</strong>”Código de vídeo, insira -o como um valor do“<strong>src</strong>Atributo no “<strong><iframe></strong>" marcação:</p> <br><h1>Alimentado por Linuxhint</h1><br><br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/NSAOrGb9orM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen><br>

Agora, para exibir o mesmo vídeo do YouTube usando o “" marcação. Insira o "src”Valor do atributo no“dadosAtributo do “" marcação:

Depois de executar os códigos acima, a página da web se parece com o seguinte:

No GIF acima, o primeiro vídeo do YouTube foi exibido na página da web.

Conclusão

Para adicionar e reproduzir vídeos na página da web, os usuários podem utilizar o “”,”", e "</strong>”Tags HTML. O "”A tag é embrulhada pela“”Tag para exibir o arquivo de vídeo na página da web. Para o "<strong><iframe></strong>”Tag, coloque o caminho da imagem em seu“<strong>src</strong>”Atributo. E para o “”Tag Coloque o caminho da imagem como um valor para o“<strong>dados</strong>”Atributo. Este artigo demonstrou como adicionar e reproduzir vídeos em uma página da web usando HTML.</p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://pt.cyberaxe.org/article/how-to-create-html-bullet-points">« Como criar pontos de bala HTML?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://pt.cyberaxe.org/article/how-can-flexbox-be-used-to-create-a-navigation-bar">Como o Flexbox pode ser usado para criar uma barra de navegação? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/aws">AWS</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-an-instance-and-how-to-use-it-in-ec2">O que é uma instância e como usá -lo no EC2?</a> </div> <div class="white-news__text"> Uma instância é uma máquina virtual localizada na nuvem que pode custar para seu uso. O serviço EC2 ... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/pedro-macejkovic">Pedro Macejkovic</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/mysql-mariadb">Mysql Mariadb</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-find-a-specific-character-in-mysql">Como encontrar um personagem específico em mysql?</a> </div> <div class="white-news__text"> Um caractere específico pode ser encontrado no MySQL usando os operadores LIFT e REGEXP ou as funçõe... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/carl-hintz-dds">Carl Hintz DDS</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/c-programming">C Programação</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/books-and-guides-for-c-language">Livros e guias para a linguagem C</a> </div> <div class="white-news__text"> Existem 6 livros e guias úteis para aprender a linguagem C. Siga este artigo para aprender em detalh... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/tommie-konopelski">Tommie Konopelski</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/postgresql">PostGresql</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/postgresql-create-index-concurrently">PostgreSQL Crie índice simultaneamente</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/orlando-green">Orlando Green</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/docker-engine-plugins">Docker Motor Plugins</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/benny-hilll-dds">Benny Hilll DDS</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-php-serialize-function">Como usar a função serializada do PHP</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/bryant-rowe-sr">Bryant Rowe Sr.</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-chrono-in-c">Como usar o Chrono em C++?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/shaun-bogan">Shaun Bogan</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-regular-expressions-in-php">Como usar expressões regulares em php</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/jackie-blanda">Jackie Blanda</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-elastic-beanstalk-is-it-paas-or-iaas">O que é o elástico beanstalk? É PaaS ou IaaS?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/benny-hilll-dds">Benny Hilll DDS</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-can-i-list-all-docker-commands">Como posso listar todos os comandos do Docker?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/benny-hilll-dds">Benny Hilll DDS</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-are-the-steps-to-launch-windows-powershell">Quais são as etapas para lançar o Windows PowerShell</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/salvatore-watsica">Salvatore Watsica</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-rename-item-command-in-powershell">O que é comando renomear-itens em PowerShell?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/tommie-konopelski">Tommie Konopelski</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-login-into-docker-via-command-prompt">Como fazer login no Docker via prompt de comando?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/evan-mueller">Evan Mueller</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Um site sobre o sistema operacional Linux. Aqui você encontrará muitos artigos interessantes e guias úteis</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/python">Pitão</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/postgresql">PostGresql</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/c-sharp">C nítido</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/oracle-database">Banco de dados Oracle</a></li> </li> <li class="menu-item"><a href="http://pt.cyberaxe.org/all-categories"><b>Todas as categorias</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>