前端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

相关代码：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Video.js 5.18.4</title>

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

     <!-- If you'd like to support IE8 -->

     <script src="js/videojs-ie8.min.js"></script>

     <style>

         body{background-color: #191919}

         .m{ width: 640px; height: 264; margin-left: auto; margin-right: auto; margin-top: 100px; }

     </style>

 </head>

 <body>

     <div class="m">

         <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"

           poster="MY_VIDEO_POSTER.jpg" data-setup="{}">

             <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">

             <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">

             <source src="http://vjs.zencdn.net/v/oceans.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>

           <script src="http://vjs.zencdn.net/5.18.4/video.min.js"></script>

           <script type="text/javascript">

             var myPlayer = videojs('my-video');

             videojs("my-video").ready(function(){

                 var myPlayer = this;

                 myPlayer.play();

             });

         </script>

     </div>

 </body>

 </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. 用cmd导入oracle的.dmp文件和修改oracle管理员密码

    1,首先创建用户 语法[创建用户]: create user 用户名 identified by 口令[即密码]: 例子:create user zhengxin identified by zhen ...

  2. 开发需求：每个表dump出部分数据

    mysqldump 每张数据表统一导出的N个记录数 需求: 在开发过程中,需要将生产的数据导出到本地开发环境,希望可以每个表都导出部分数据.由于生产数据表都是上千万或亿级别,直接从服务器导出数据会影响 ...

  3. sklearn的BaseEstimator、transformerMixin、ClassifierMixin、RegressorMixin、ClusterMixin介绍

    class sklearn.base.BaseEstimator:为所有的estimators提供基类 方法: __init__() 初始化方法 get_params(deep=True) 获取这个估 ...

  4. [ffmpeg]deocde audio(v3.3.2)

    /* * Copyright (c) 2001 Fabrice Bellard * * Permission is hereby granted, free of charge, to any per ...

  5. php变量详细讲解

    变量是用于存储信息的"容器". 定义一个变量的语法: $变量名 = 值; 使用变量的例子: <?php $x=5; $y=6; $z=$x+$y; echo $z; ?> ...

  6. R语言中的遗传算法详细解析

    前言 人类总是在生活中摸索规律,把规律总结为经验,再把经验传给后人,让后人发现更多的规规律,每一次知识的传递都是一次进化的过程,最终会形成了人类的智慧.自然界规律,让人类适者生存地活了下来,聪明的科学 ...

  7. 谷歌推出新型强化学习框架Dopamine

    今日,谷歌发布博客介绍其最新推出的强化学习新框架 Dopamine,该框架基于 TensorFlow,可提供灵活性.稳定性.复现性,以及快速的基准测试. GitHub repo:https://git ...

  8. 《Linux内核精髓：精通Linux内核必会的75个绝技》一HACK #18　向ext4转换

    HACK #18 向ext4转换 ext4可以与ext2/ext3在后台进行互换.这里将介绍从ext2/ext3转换的方法以及转换时的注意事项.转换有两种方法可以将ext2/ext3的磁盘映像作为ex ...

  9. ELK配置过程初次安装使用心得--elasticsearch5.4版--及logstash

    安装所遇到的问题:http://www.bubuko.com/infodetail-1889252.html 一,先创建用户和组groupadd es useradd -g es es passwd  ...

  10. RabbitMQ-从基础到实战（4）— 消息的交换（中）

    转自:https://www.cnblogs.com/4----/p/6590459.html 1.简介 本章节和官方教程相似度较高,英文好的可以移步官方教程 在上一章的例子中,我们创建了一个消费者, ...