使用 video.js 开发 HTML5 视频页面

使用 video.js 开发 HTML5 视频页面

时间 2015-05-13 17:11:58
The GIS Guy
主题
Video.js
HTML5

使用 video.js 简单几步编写一个可以在微信、QQ内置浏览器中正常工作的 HTML5 视频播放器。

HTML5 标签看似简单,但在不同设备上使用时却问题不断,原因是很多设备强制使用自身的视频播放器来播放 HTML5 视频。使用第三方组件 video.js 可以在一定程度上克服这个问题。

初始化 video.js

编写 HTML 页面:

<<span class="hljs-name">head>  
        <<span class="hljs-name">meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <<span class="hljs-name">title></<span class="hljs-name">title>
        <<span class="hljs-name">link href="include/video-js/video-js.css" rel="stylesheet">
        <<span class="hljs-name">script src="video.js"></<span class="hljs-name">script>
        <<span class="hljs-name">script>
                videojs.options.flash.swf = "include/video-js/video-js.swf"
        </<span class="hljs-name">script>
</<span class="hljs-name">head>  
<<span class="hljs-name">body>  
<<span class="hljs-name">video id="video" class="video-js vjs-default-skin vjs-big-play-centered"  
        controls preload="auto" width="100%" height="100%"
        poster="img/pure-black.jpg" data-setup=''>
        <<span class="hljs-name">source src="video/video.mp4" type='video/mp4' />
        <<span class="hljs-name">source src="video/video.webm" type='video/webm' />
        <<span class="hljs-name">source src="video/video.ogv" type='video/ogg' />
 <<span class="hljs-name">p class="vjs-no-js">播放视频需要启用 JavaScript,推荐使用支持HTML5的浏览器访问。</<span class="hljs-name">p>
</<span class="hljs-name">video>  
</<span class="hljs-name">body>  

与官方教程相比,这里为 video 元素额外添加了 vjs-big-play-centered 类,让播放按钮显示在视频的正中间(默认在左上角)。 controls 表示自动添加播放控件。加上 preload="auto" 可以让页面加载完成后立即开始加载视频,如果设置为 preload="meta" 则只加载视频元数据。

中声明 ,可以让页面在高分辨率的手机上显示正确的尺寸,防止因为屏幕像素高而使得页面元素变得很小。

虽然页面中已经指定 高度为100%,但此时视频控件高度仍然为0,可以用下面的 CSS 样式让视频控件全屏。

html, body {  
    width: 100%;
    height: 100%;
}

为适配不同内核的浏览器,需要同时提供 .mp4、.ogv、.webm 三种格式的视频,但 OS X 下没有找到好用的免费转换器可以同时转换成 .mp4、.ogv 和 .webm 三种格式。miro 虽然号称免费开源,但是不捐钱无法得到下载链接……如果视频不大,推荐使用 converter.com 的在线转换器。

可以看看上面代码在浏览器中的效果:

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/114239.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 2019-07高德地图行政区域省市区json数据获取(php代码)

    2019-07高德地图行政区域省市区json数据获取(php代码)写在前面从省向下查三级,高德县级市的子级会返回街道,正常的市正常返回子级为区。具体高德api参数详情请查看https://lbs.amap.com/api/webservice/guide/api/district代码//获取json数据publicfunctiongetDataAction(){set_time_limit(0);$url=”…

  • 什么是pisa测试_PISA测试是什么?[通俗易懂]

    什么是pisa测试_PISA测试是什么?[通俗易懂]“国际高中指南”,给你国际学校选择一站式教育服务,最新国际学校资讯,最全面国际高中课程详情,都能通过“国际高中指南”为你解决,帮助你第一时间获取国际学校动态。为什么你会为孩子选择国际学校?因为这里的教育模式、课程体系能够帮助孩子更早的确立自己的兴趣爱好甚至未来的发展目标,能够帮助孩子全方位提升阅读能力、逻辑思维、数理分析能力等等。那这些能力可以通过什么方式去衡量呢?PISA测试。【PISA】什么是…

  • react脚手架有哪些_vue脚手架3搭建项目

    react脚手架有哪些_vue脚手架3搭建项目前言如何快速搭建一个httprunner项目呢?我们可以使用脚手架,脚手架就是自动地创建一些目录,形成一个项目的架构,不需要我们再手动的去创建查看创建新项目的命令先来查看一下帮助命令httpr

  • linux下载安装软件的命令(linux查看日志命令grep)

    LINUX下安装软件包常有三种linux常用命令,不同的软件包有不同的安装方法:tar包,整个安装过程可以分为以下几步:1)取得应用软件:通过下载、购买光盘的方法获得;2)解压缩文件:一般tar包,都会再做一次压缩,如gzip、bz2等,所以你需要先解压。如果是最常见的gz格式linux常用命令,则可以执行:“tar–xvzf软件包名”,就可以一步完成解压与解包工作。如果不是,则先用解压软件…

  • case label does not reduce to_class not loaded

    case label does not reduce to_class not loadedClassCastException出现原因解决办法出现原因抛出以指示代码已尝试将对象强制转换为它不是实例的子类。例如,以下代码生成一个ClassCastException:对象x=新整数(0);System.out.println((String)x);解决办法这种异常我也不知道有什么能够完全解决的办法,但是可以同instanseof来避免例如:Pet宠物类   Dog狗狗类(继承Pet)  Penguin企鹅类(继承Pet)  Dogdog=(Dog)pet

  • 安装opencv失败解决

    安装opencv失败解决失败命令pipinstallopencv-python命令改成:pipinstall-ihttps://pypi.tuna.tsinghua.edu.cn/simpleopencv-python安装成功!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号