h5这么火是有它的理由的，支持原生视频播放，但是目前兼容性还不是很好，因此使用js框架支持网站视频播放是比较不错的选择。

　　下载video.js，我们可以通过官网去下，但是官网在国外，我尝试了几次均下载失败，于是使用JS神器nodeJS来下载。

  1.  npm i video.js

　　下载好后有两个文件是我们需要的，video-js.min.css和video.min.js。

最简单的应用是这样的：

  1.  <html>
  2.  <head>
  3.      <meta charset="utf-8">
  4.      <meta name="viewport" content="width=device-width">
  5.      <title>GuangSoft</title>
  6.      <link href="video-js.min.css" rel="stylesheet">
  7.      <script src="video.min.js"></script>
  8.  </head>
  9.  <body>
  10.    <video id="videoContainer" class="video-js" controls preload="none" width="640" height="264" poster="logo.png" data-setup="{}">
  11.      <source src="1.mp4" type="video/mp4">
  12.    </video>
  13.  </body>
  14.  </html>

效果如下：

　　嗯，有效果，好的，可以继续探讨一下播放器参数了，我们的代码编程这样：

  1.  <html>
  2.  <head>
  3.      <meta charset="utf-8">
  4.      <meta name="viewport" content="width=device-width">
  5.      <title>GuangSoft</title>
  6.      <link href="video-js.min.css" rel="stylesheet">
  7.      <script src="video.min.js"></script>
  8.  </head>
  9.  <body>
  10.    <video id="videoContainer" class="video-js">
  11.    <script>
  12.      var options = {
  13.          sources : [{
  14.              src : "1.mp4",
  15.              type : "video/mp4"
  16.          }],
  17.          //是否显示控制条
  18.          controls : true,
  19.          //播放器高度
  20.          height : 264,
  21.          //播放器宽度
  22.          width : 640,
  23.          //是否循环播放
  24.          loop : false,
  25.          //是否静音
  26.          muted: false,
  27.          //播放前显示的封面图片，通常为logo
  28.          poster : "logo.png",
  29.          //预加载：auto自动加载、metadata加载元数据信息视频尺寸等、none不加载任何信息
  30.          preload : "none",
  31.          //是否缩放视频以适应播放器大小
  32.          fluid : false,
  33.          //是否自动播放，大多浏览器屏蔽此功能
  34.          autoplay : false,
  35.          //是否初始化时进入全屏，大多数浏览器屏蔽此功能
  36.          isFullscreen : false
  37.      };
  38.      function onPlayReady() {
  39.          //播放无效，因为以chrome为首的绝大数浏览器拒接非用户触发的自动播放
  40.          //this.play();
  41.          //音量调整0-1之间
  42.          this.volume(0.5);
  43.          this.on("ended", function() {
  44.              //类似console.log();
  45.              videojs.log("播放结束！");
  46.          })
  47.      }
  48.      videojs('videoContainer', options, onPlayReady);
  49.    </script>
  50.  </body>
  51.  </html>

Web视频播放之video.js的更多相关文章

  1. web视频播放插件:Video For Everybody

    相比其它的web视频播放插件(video.js , jwplayer等)来说,Video For Everybody(极力推荐)是一款更好的视频播放插件,无需任何下载,支持html5以及flash播放 ...

  2. 习课的视频播放器 video.js

    jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...

  3. HTML5视频播放插件 video.js介绍

    video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/    git& ...

  4. 视频播放效果--video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  5. Vue小功能-视频播放之video.js

        最近在练手一个小项目,想给首页增加一个视频介绍(如下图).涉及到了vue视频播放的功能,所以在网上了解了一下.     相关的插件是Video.js,官网讲解比较详细,我罗列出来,可以根据自己 ...

  6. HTML5视频播放插件Video.js使用详解

    一.Video.js简介 Video.js 是一个开源的 Html5 jquery 视频插件,这个插件可以用来处理 Flash 视频,它还是一个多平台支持的产品. Moreover,YouTube,V ...

  7. [HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls

    DEMO地址:https://github.com/Tinywan/PHP_Experience https://github.com/videojs/videojs-contrib-hls 下载JS ...

  8. 视频播放插件Video.js

    这是一个很强大的视频播放插件.

  9. Video.js web视频播放器

    免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于vide ...

随机推荐

  1. [LeetCode] 154. Find Minimum in Rotated Sorted Array II_Hard

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  2. js动态规划---最少硬币找零问题

    给定钱币的面值 1.5.10.25 需要找给客户 36 最少找零数为: 1.10.25 function MinCoinChange(coins){ var coins = coins; var ca ...

  3. js中两个!!的理解

    在js中经常有两个!!出现,经常让人难以理解 (function () { var a = 10; var b = 20; function add(num1, num2) { var num1 = ...

  4. Python基础(三)Mysql数据库安装及使用

    在python下使用mysql需要: 1.安装mysql 2.安装python  pymysql包(pymysql包支持py3 跟mysqldb用法差不多) 一.安装mysql mysql下载地址:h ...

  5. 比较两种方式的form请求提交

    [一]浏览器form表单提交 表单提交, 适用于浏览器提交.像常见的pc端的网银支付,用户在商户商城购买商品,支付时商家系统把交易数据通过form表单提交到三方支付网关,然后用户在三方网关页面完成支付 ...

  6. Unable to update the EntitySet 'T_JsAPI' because it has a DefiningQuery and no <InsertFunction> element exists in the <ModificationFunctionMapping> element to support the current operation.

    前几天使用EF6的Db First模式改造了支付中心的数据访问层,废弃了ado.net. 同时,使用T4把实体类生成到了model层的PO目录下. 今天在db里新建了一张表,在edmx文件里更新模型( ...

  7. 如何使用Apache log4net库与ASP.NET MVC 5日志记录

    在运行软件程序的时候,跟踪和监控日志是一种记录过程的好方法. 简介: 在运行软件程序的时候,跟踪和监控日志是一种记录过程的好方法.尤其在应用程序出错的时候,日志是我们最需要的文件.不管是在web,wi ...

  8. big and little endian

    总是容易搞混big endian 和 little endian,但是找到一篇文章,其解释让人耳目一新. 文章链接:http://www.cs.umd.edu/class/sum2003/cmsc31 ...

  9. const_cast, dynamic_cast, static_cast,reinterpret_cast

    一.const_cast:用于移除const数据,目标数据类型必须与原类型相同 二.dynamic_cast:用于在两个不同类型之间进行强制转换并且在执行运行时检查它.保证它的合法性,如果在两个互相矛 ...

  10. css 文字样式

    Gradient 3D text 代码区域 /*css */ body { background-color: #272727; } h1 { font-family: "Arial&quo ...