阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      如何在 HTML5 页面嵌入视频?

      HTML5 定义了嵌入视频的标准方法,支持的格式包括:MP4、WebM 和 Ogg:

      HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器,用于支持文档内的视频播放。

      你也可以将 <video> 标签用于音频内容,但是 <audio> 元素可能在用户体验上更合适。

      实现方法

      <video controls width="250">
          <source src="/media/examples/flower.webm"
                  type="video/webm">
          <source src="/media/examples/flower.mp4"
                  type="video/mp4">
          您的浏览器不支持 video 标签。
      </video>
      

      其它例子

      <!-- Simple video example -->
      <video src="videofile.ogg" autoplay poster="posterimage.jpg">
        抱歉,您的浏览器不支持内嵌视频,不过不用担心,你可以 <a href="videofile.ogg">下载</a>
        并用你喜欢的播放器观看!
      </video>
      <!-- Video with subtitles -->
      <video src="foo.ogg">
        <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
        <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
      </video>
      

      第一个例子播放一个视频,视频一收到,允许播放的时候就会立马开始播放,而不会停下来直到下载更多内容。

      图片 “posterimage.jpg” 会一直展示在视频区域,直到开始播放。

      第二个例子允许用户选择不同的字幕。

      更多可以通过 HTML video 标签 来了解

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录