Home / Questions / 4889
Accepted
Danilo
Asked: 2020-02-28 07:26:16 +0800 CST 2020-02-28 07:26:16 +0800 CST

是否有任何适用于 html5 的响应式视频播放器，可以播放所有或大多数格式？

  • 772

我想知道是否有任何适用于 html5 的响应式视频播放器，可以播放所有或大部分格式。我试过一个叫 Jplayer，但它只接受一些 mp4 格式，http: //www.jplayer.org/latest/demos/

但我正在寻找的是 jquery 或 flash 中的播放器，或者任何好的选择，即响应式，允许您播放任何视频（mp4、avi、mpg 等）

jquery

2 Answers

  1. Best Answer

    浏览器支持的格式不取决于您使用的播放器，而是取决于浏览器对格式的支持。目前 mp4 是最受H.264 和 MP3编解码器支持的，请参阅浏览器支持的格式一文，因此通常所做的是在标签中指定几种格式，video以便在其中一些格式无法使用的情况下进行回退used 可以用元素来完成<source>

    <video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
    <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
    <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
    <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
    Your browser doesn't support HTML5 video tag.
</video>

    一般情况下，不支持或者HTML5不可用的时候，都是用插件才能玩的，一般都是用Flash和小程序来做的，但是有个缺点就是如果不安装就不会无论如何工作。

    就个人而言，我使用了video.js插件，效果非常好，因为它可以让你在浏览器之间有统一的体验，你甚至可以用bower安装它

    bower install --save video.js

    要使用它，就像使用原生表单一样使用 HTML5 视频标签

    <link href="https://vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.4.6/video.min.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" data-setup='{"example_option":true}'>
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4" />
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm" />
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg" />
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

    视频 js 负责播放和播放器的外观和感觉，这是可定制的，在所有浏览器中看起来都一样！！！.

    它还有一个非常好的功能，那就是它支持插件，所以如果您在业务逻辑中有任何特殊需求，您可以使用已经存在的插件之一或编写自己的插件。

    • 4

  2. 根据提问者的意见，我建议如下：

    我刚刚完成了一个带有视频壁纸的 RWD（Background Fullsreen HTML5），从中我学到了以下内容，我分享了我的注释。

    每个浏览器都以自己的方式播放 HTML5 视频，这取决于浏览器的使用年限和浏览器设备上安装的编解码器。浏览器越旧，再现性越差。您要呈现的视频格式的顺序很重要，并且取决于您拥有的视频的质量。这是一些 HTML5 视频嵌入代码：

    <div id="fullscreen-bg">
    <video id="bg-video" autoplay poster="images/home-video-poster.jpg" loop>
        <source src="videos/home-intro.webm" type="video/webm" />
        <source src="videos/home-intro.mp4" type="video/mp4" />
        <source src="videos/home-intro.ogv" type="video/ogg" />
        <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/3gpp" />
        <object type="application/x-shockwave-flash" data="videos/flashfox.swf" width="1280" height="720" style="position:relative;">
            <param name="movie" value="videos/flashfox.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="flashVars" value="autoplay=true&amp;controls=true&amp;fullScreenEnabled=true&amp;posterOnEnd=true&amp;loop=true&amp;poster=images/home-video-poster.jpg&amp;src=videos/home-intro.m4v" />
            <embed src="videos/flashfox.swf" width="1280" height="720" style="position:relative;" flashVars="autoplay=true&amp;controls=true&amp;fullScreenEnabled=true&amp;posterOnEnd=true&amp;loop=true&amp;poster=images/home-video-poster.jpg&amp;src=videos/home-intro.m4v" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
            <img alt="Video playback is not supported by your browser" src="images/home-video-poster.jpg" style="position:absolute;left:0px;width:100%;" title="Video playback is not supported by your browser" />
        </object>
    </video>
</div>

    对于响应式网页设计 (RWD)，您必须使用您的编程技能或帮助使用EasyHTML5Video等外部插件。

    这里我根据编解码器向您展示浏览器支持：

    支持的桌面格式 移动设备的可接受格式

    尽管如此; 尽管我们付出了很多努力来为访问者提供最好的服务，但最终您可能会意识到，最好将视频上传到 YouTube，然后通过其API播放。因为YouTube 播放器会根据根据浏览器的特性，用户，可以是屏幕大小、直径、codex、分辨率等。

    这里有一个例子：

    <!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'ab0TSkLe-E0',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

    为了不编写大量代码，您可以通过编写以下代码来帮助自己使用Media Element：

    <video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />

    我想我给了你足够的信息来帮助你完成你的项目。RWD 是设计，它使用 CSS2.1+ 和 HTML5+

    干杯

    • 3