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/php">php</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-break-and-continue-in-php">Como usar o intervalo e continuar em php?</a> </div> <div class="white-news__text"> No PHP, a declaração de quebra é usada para encerrar uma declaração de loop ou interruptor enquanto ... </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/java">Java</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/java-stream-examples">Exemplos de fluxo Java</a> </div> <div class="white-news__text"> Guia sobre os diferentes usos do fluxo Java na programação Java, como gerar a matriz e a coleção par... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/bryant-rowe-sr">Bryant Rowe Sr.</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/bash-programming">Programação Bash</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-fix---bash-pip-command-not-found">Como consertar - comando bash pip não encontrado</a> </div> <div class="white-news__text"> O... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/benny-hilll-dds">Benny Hilll DDS</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/python">Pitão</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/seaborn-axis-labels">Etiquetas do eixo marítimo</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/salesforce">Força de vendas</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/salesforce-apex---list">Salesforce Apex - Lista</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/carl-hintz-dds">Carl Hintz DDS</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/ubuntu">Ubuntu</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-install-cuda-on-ubuntu-top-10-top-10-lts">Como instalar o CUDA no Ubuntu Top 10.Top 10 LTS</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/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">Como converter string em tipo inteiro em Golang?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/marlon-bernhard">Marlon Bernhard</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/what-is-an-undefined-index-error-in-php-and-how-to-fix-it">O que é um erro de índice indefinido no PHP e como corrigi -lo?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/joey-bartoletti">Joey Bartoletti</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/how-to-use-instance-life-cycle-in-aws">Como usar o ciclo de vida da instância na AWS?</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> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/oracle-database">Banco de dados Oracle</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-the-purpose-of-oracle-cerner">Qual é o objetivo do Oracle Cerner?</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/html">html</a> </div> <div class="header-news__name"> <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> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/pedro-macejkovic">Pedro Macejkovic</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/why-should-i-use-aws-organizations">Por que devo usar organizações da AWS?</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/git">Git</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-create-a-git-repository-for-local-projects">Como criar um repositório Git para projetos locais?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/rickey-greenholt">Rickey Greenholt</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>