html5中video标签部分浏览器无法播放

html5中video标签部分浏览器无法播放

使用示例: HTMLvideo标签:

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

目前已支持一下浏览器:

浏览器MP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYES从 Firefox 21 版本开始Linux 系统从 Firefox 30 开始YESYES
SafariYESNONO
OperaYES从 Opera 25 版本开始YESYES
  • MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
  • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
  • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
属性描述
autoplayNewautoplay如果出现该属性,则视频在就绪后马上播放。
controlsNewcontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightNewpixels设置视频播放器的高度。
loopNewloop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedNewmuted如果出现该属性,视频的音频输出为静音。
posterNewURL规定视频正在下载时显示的图像,直到用户点击播放按钮。
preloadNewauto metadata none如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
srcNewURL要播放的视频的 URL。
widthNewpixels设置视频播放器的宽度。

以上是基本数属性,可以满足一般性的浏览器使用,但是在使用过程中,比如谷歌浏览器,就会出现各种问题,那么我们就要借助第三方video.css,video.js进行辅助处理问题. video.js的官方地址: https://videojs.com/ 如果你能访问,并且能看到此官网的视频,那么说明您的浏览器已被video.js所支持.

引用原文: Download There are a few ways to get started using Video.js (currently v7.11.4), but you should select the one that best fits your particular use case.

Video.js CDN Our friends at Fastly are nice enough to provide hosting for all the necessary files for Video.js on their content delivery network. Using these hosted files is probably the easiest way to get started using Video.js, you simply need to include the following links in your page.

<head>
  <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
</body>

Distributions A Video.js distribution is what you’ll find if you’ve downloaded a release or installed via a package manager.

Video.js/
├── alt
│   ├── video.core.js
│   ├── video.core.min.js
│   ├── video.core.novtt.js
│   ├── video.core.novtt.min.js
│   ├── video.novtt.js
│   └── video.novtt.min.js
├── examples/
├── font
│   ├── VideoJS.svg
│   ├── VideoJS.ttf
│   └── VideoJS.woff
├── lang/
├── video-js-<span class="vjs-version">$LATEST_VERSION$</span>.zip
├── video-js.css
├── video-js.min.css
├── video.cjs.js
├── Video.es.js
├── Video.js
└── video.min.js

This package includes everything you’ll need to use Video.js on a production site. By default, we bundle Video.js with Mozilla’s excellent VTT.js. If you don’t need VTT.js functionality for whatever reason, you can use one of the Video.js copies that don’t include VTT.js. These have novtt in the name and can be found in the alt/ directory. font/ includes all the generated icon font files from the Videojs Font project. lang/ contains all the generated translation files.

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片