使用 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)


相关推荐

  • 具体解释VB中连接access数据库的几种方法

    具体解释VB中连接access数据库的几种方法

    2021年11月30日
  • 多种DLL注入技术原理介绍

    多种DLL注入技术原理介绍本文中我将介绍DLL注入的相关知识。不算太糟的是,DLL注入技术可以被正常软件用来添加/扩展其他程序,调试或逆向工程的功能性;该技术也常被恶意软件以多种方式利用。这意味着从安全角度来说,了解DLL注入的工作原理是十分必要的。不久前在为攻击方测试(目的是为了模拟不同类型的攻击行为)开发定制工具的时候,我编写了这个名为“injectAllTheThings”的小工程的大…

  • 手机号码正则表达式匹配

    手机号码正则表达式匹配正则表达式匹配手机号码最近在学习正则表达式,在这里写一个手机号码的匹配表达式手机号码的规则11位,第一位一定是1 第二位和第三位根据不同运营商的号码段有所区别,只有有限的组合是合法的手机号码 后8位可以是任意数字表达式^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$解释:^:代表起始,即手机号码只能以1为开头3[0-9]:代表手机号码第二位可以是3,第三位可以是0-9中任意一个数字5[0-3,5-9]:代表手机号码第二位也可以是5,

  • Eclipse使用教程_eclipse怎么运行整个项目

    Eclipse使用教程_eclipse怎么运行整个项目PS:最近很多同学问我eclipse不知道怎么用,那我们出一个eclipse的教程Start:如果你们觉得eclipse的windows英文版看的很累,我放一个汉化的教程吧👇ht

  • 七牛云大数据平台建设实践

    七牛云大数据平台建设实践七牛云CEO许式伟首次披露七牛云在大数据方向的产品思路。

  • url的加密解密_url地址加密

    url的加密解密_url地址加密今天做项目构造链接参数的时候,推送到app上的链接点了没办法跳转到对应的界面对比了一下能跳转的链接,原来是url没有加密,就推送过去了在这里把对url加密解密的方法记录一下,方便以后使用publicstaticStringgetURLEncoderString(Stringstr){Stringresult="";if(null==str){…

    2022年10月29日

发表回复

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

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