前端video做起来很简单，但是还是需要做一些记录，不然下次再做相关的业务仍得费时间找。

参考地址：

http://www.jq22.com/jquery-info404

http://www.runoob.com/html/html-videos.html

用html5media.min.js，在火狐上不支持，在谷歌上可以，就放弃了。不过用起来确实很简单、快捷，可是有点不兼容，

也许是我没有引用的正确，如果哪位同志试验成功，可以告诉一声！

参考地址：https://www.helloweba.com/view-blog-266.html

相关代码：

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>Video.js 5.18.4</title>
  6.      <link href="css/video-js.css" rel="stylesheet">
  7.      <!-- If you'd like to support IE8 -->
  8.      <script src="js/videojs-ie8.min.js"></script>
  9.      <style>
  10.          body{background-color: #191919}
  11.          .m{ width: 640px; height: 264; margin-left: auto; margin-right: auto; margin-top: 100px; }
  12.      </style>
  13.  </head>
  14.  
  15.  <body>
  16.      <div class="m">
  17.          <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  18.            poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  19.              <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  20.              <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
  21.              <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
  22.              <p class="vjs-no-js">
  23.                To view this video please enable JavaScript, and consider upgrading to a web browser that
  24.                <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  25.              </p>
  26.            </video>
  27.            <script src="http://vjs.zencdn.net/5.18.4/video.min.js"></script>
  28.            <script type="text/javascript">
  29.              var myPlayer = videojs('my-video');
  30.              videojs("my-video").ready(function(){
  31.                  var myPlayer = this;
  32.                  myPlayer.play();
  33.              });
  34.          </script>
  35.      </div>
  36.  
  37.  </body>
  38.  </html>

HTML 视频（Videos）的更多相关文章

  1. [译]：Orchard入门——部件管理

    原文链接:Managing Widgets 在Orchard中,部件是可以加入到当前当前主题任何位置或区域(如侧栏sidebar或底部区域footer)的UI块(如:HTML)或代码部分(如:内容部分 ...

  2. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  3. node.js 小爬虫 imooc 2016.03.06

    爬虫目标:获取http://www.imooc.com/learn/348网页中的章节标题和视频信息. var http = require('http'); var cheerio = requir ...

  4. Android 5.0 开发者官方网站疏理知识结构

    Android 5.0 开发人员官网知识结构疏理 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公 ...

  5. github第一步之初始化操作

    目录 0.首先注册一个账号 1.创建知识库Repository 2.创建一个分支branch--feature 3.制作并提交commit 4.打开拉取请求pull 5.合并自己的pull请求 git ...

  6. HTML教程（看完这篇就够了）

    HTML教程 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言.您可以使用 HTML 来建立自己的 WEB 站点,HTML 运 ...

  7. Pexels Videos – 可以免费商业使用的短视频

    Pexels 是一个巨大的平台,提供免费的精美照片,很多设计师和博客每天用它来寻找他们的个人和商业项目的照片.现在我们想介绍 Pexels 视频,他是用来帮助你找到免费的视频.所有的 Pexels 视 ...

  8. [videos系列]日本的videos视频让男人产生了哪些误解?

    转载自:[videos系列]日本的videos视频让男人产生了哪些误解? 日本的videos视频是每个男人成长过程中都会看的启蒙教育片,也是男人在成年后调剂生活的必需品,但是由于影视作品是艺术的,是属 ...

  9. 从MATLAB到FPGA 视频和图像处理——讲座学习小结（视频地址https://ww2.mathworks.cn/videos/from-matlab-to-fpga-video-and-image-processing-102492.html）

    1.HDLcoder产品介绍 图像处理分为两个部分: 这里主要讨论第一部分图像处理部分. 一般产品设计流程如下: 适用人群有以下两类: 这里先用一张slider来进行整体概括: 基于模型的设计的好处— ...

随机推荐

  1. (转)USB中CDC-ECM的了解和配置

    USB中典型类及子类: 类别 解释 子类 典型应用 IC芯片 备注 UVC 视频类 免驱USB摄像头 CDC 通讯类 RNDIS ECM(p24) 免驱USB网卡 RTL8152B EEM ..... ...

  2. Centos7扩展磁盘空间（LVM管理）

    vmware或hyperv,扩容磁盘,本例中使用的是vmware,关闭系统,在vmware—>设置—>硬盘—>扩展—>输入数字大于当前系统内存—>点击扩展,如图: 1.  ...

  3. ExtJS 动态组件与组件封装

      介绍几个有用的函数: Ext.apply---追加配置选项Ext.reg,----注册xtypeExt.extend--扩展组件||操作({}|| cfg)fireEvent自定义事件机制 --- ...

  4. UVA-839-二叉树-一个有意思的题目

    题意: 一颗二叉树可以看成一个杠杆,左右俩边有重量,有到支点长度,判断整个树是否平衡(根据杠杆原理),如果当前结点有左孩子,那么当前左边的重量就是左孩子的总和,右边同理 递归,发现scanf和cin的 ...

  5. RESTful转载，多看几遍就理解了写点自己的看法和理解

    要理解资源路由就要理解什么是RESTful.如果一个架构符合REST(即Representational State Transfer的缩写,意为表现层状态转化)原则,就称它为RESTful架构. R ...

  6. 用多个class选择元素

    注意下面两个的区别:  $(".role-developer.role-designer").css("color","red");  $( ...

  7. json小知识

    json转换新方法 上面是把一个json数组转换成map集合 fromObject()是通用的 map集合,bean对象,String转换成json 文件转换成字符串,在转换成json 生成json文 ...

  8. Android 照相

    XE6 控件太强了CameraComponent就可以了 CameraComponent1.Active := True; procedure TCameraComponentForm.CameraC ...

  9. oracle启动过程

    Oracle  的启动需要经历四个状态,SHUTDOWN .NOMOUNT .MOUNT .OPEN. SHUTDOWN状态                                       ...

  10. 趣味编程：CPS风格代码（Java 8，Functional Java版）

    CPS风格代码(Java 8版) package fp; import java.util.function.IntConsumer; public class CPS { static int ad ...