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

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

 npm i video.js

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

最简单的应用是这样的：

 <html>

 <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width">

     <title>GuangSoft</title>

     <link href="video-js.min.css" rel="stylesheet">

     <script src="video.min.js"></script>

 </head>

 <body>

   <video id="videoContainer" class="video-js" controls preload="none" width="640" height="264" poster="logo.png" data-setup="{}">

     <source src="1.mp4" type="video/mp4">

   </video>

 </body>

 </html>

效果如下：

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

 <html>

 <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width">

     <title>GuangSoft</title>

     <link href="video-js.min.css" rel="stylesheet">

     <script src="video.min.js"></script>

 </head>

 <body>

   <video id="videoContainer" class="video-js">

   <script>

     var options = {

         sources : [{

             src : "1.mp4",

             type : "video/mp4"

         }],

         //是否显示控制条

         controls : true,

         //播放器高度

         height : 264,

         //播放器宽度

         width : 640,

         //是否循环播放

         loop : false,

         //是否静音

         muted: false,

         //播放前显示的封面图片，通常为logo

         poster : "logo.png",

         //预加载：auto自动加载、metadata加载元数据信息视频尺寸等、none不加载任何信息

         preload : "none",

         //是否缩放视频以适应播放器大小

         fluid : false,

         //是否自动播放，大多浏览器屏蔽此功能

         autoplay : false,

         //是否初始化时进入全屏，大多数浏览器屏蔽此功能

         isFullscreen : false

     };

     function onPlayReady() {

         //播放无效，因为以chrome为首的绝大数浏览器拒接非用户触发的自动播放

         //this.play();

         //音量调整0-1之间

         this.volume(0.5);

         this.on("ended", function() {

             //类似console.log();

             videojs.log("播放结束！");

         })

     }

     videojs('videoContainer', options, onPlayReady);

   </script>

 </body>

 </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. express框架之session 存储

    1.express-session 是基于express框专门用于处理session的中间件.这里不谈express-session怎么安装,只给出相应的实例代码.另外,session的认证机制离不开 ...

  2. 数据分析与挖掘 - R语言：贝叶斯分类算法（案例三）

    案例三比较简单,不需要自己写公式算法,使用了R自带的naiveBayes函数. 代码如下: > library(e1071)> classifier<-naiveBayes(iris ...

  3. js获取微信code

    function callback(result) { alert('cucess'); alert(result); //输出openid } function getQueryString(nam ...

  4. 在屏幕拖拽3D物体移动

    3D物体的拖拽不同于2D的.因为3D物体有x,y,z当然.实际拖拽还是在XZ平面.只是多了几个转换 using UnityEngine; using System.Collections; publi ...

  5. caffe配置文件

    一.数据层及参数 要运行caffe,需要先创建一个模型(model),如比较常用的Lenet,Alex等, 而一个模型由多个屋(layer)构成,每一屋又由许多参数组成.所有的参数都定义在caffe. ...

  6. ssdb使用笔记

    ssdb是一款类似于redis的nosql数据库,不过redis是基于内存的,服务器比较昂贵,ssdb则是基于硬盘存储的,很容易扩展,对于一些对速度要求不是太高的应用,还是不错的选择. 先记录一个比较 ...

  7. Koa中使用cookies

    错误重现:(使用ctx.cookies.set时报错) 这是因为koa的http的header字符集支持US-ASCII子集的字符集,故设置中文是'utf8'时就会报上面错误 解决方法有两种: 1.  ...

  8. LeetCode28.实现strStr()

    实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返 ...

  9. jQuery-手风琴效果-2

    动画 高级函数:基于底层函数又进行了封装 两大块:简化版的动画函数和万能动画函数 简化版动画函数 显示/隐藏$().show; $(...).hide(); 强调:无参数的show()/hide()使 ...

  10. php 静态方法 静态属性 和 普通方法 普通属性区别

    1,实例属性,是每个对象都可以不一样的数据,也是每个对象都“独自拥有”的数据: 2,静态属性,他不属于任何一个对象,而只属于该类本身,也可以理解为为所有对象所共有的数据: