使用JWPlayer在网页中嵌入视频
我一直以为在网页中嵌入视频是件复杂的事,一研究才知道原来非常简单。
实际就是在页面中嵌入个控件。社区里已有很多解决方案了。jwplayer是最受欢迎的(之一)。
控件包括js、css和swf文件,swf文件就是播放器,它是控件的一部分,引入控件包跟引入其他的前端控件包方法一样,拷贝到项目路径下即可。
视频是个flv文件,flv文件就放哪里都行了。个人建议像图片一样放个单独的服务器。
示例程序在这里,代码已经传到了github上。
jwplayer本身的文档在这里,藏得非常深,个人非常不喜欢这个官网,花里胡哨,张牙舞爪。
官方文档我还是喜欢朴素简洁的那种。
网页代码及其简单,仅此而已:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>use jw</title><script src="jwplayer/jwplayer.js"></script>
<!-- 并不是每个用户独有的身份码,官网给的唯一的,不用改 -->
<script>jwplayer.key="bAoNHra71KE/mHvb0sirT4HeWLTAkpiYa1mVsA==";</script>
</head>
<body>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "http://img.zidafone.com/test.flv",
image: "http://img.zidafone.com/test.jpg",
width: 640,
height: 360,
title: 'Beautiful Woman',
description: 'This is the most beautiful woman in the world, do you agree?'
});
</script>
</body>
</html>
使用JWPlayer在网页中嵌入视频的更多相关文章
- 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)
在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...
- 【CKplayer】使用CKplayer插件在网页中嵌入视频的方法
在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...
- 用flvplayer.swf在网页中播放视频(网页中flash视频播放的实现)
原:http://blog.csdn.net/ricciozhang/article/details/46868201 由于公司项目的需求,需要在展示一些信息的时候能够播放视频,拿到这个要求,我就从最 ...
- 利用CSS的@font-face属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
- IE8下网页中的视频会遮挡住顶层DIV的解决办法
在IE8浏览器下,发现网页中的视频会遮挡住本来固定在最顶层的DIV.即便使用z-index也无法解决.但是其他浏览器是正常的. 解决的办法很简单,就是在调用flash视频播放器的时候,加上一个参数“o ...
- 网页中嵌入百度地图报错:The request has been blocked,the content must served over Https
网页中嵌入百度地图 1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular 2.获取密钥:http://lbsyun.baidu. ...
- pc网页中嵌入百度地图
pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...
- 用firefox的插件下载网页中的视频
对于网页中的一些视频,直接下载不了,可以用专用下载软件下载,也可以用firefox的NetVideohunter Video Downloader插件下载网页中的视频,方便快捷. 工具/原料 fi ...
- h5中嵌入视频自动播放的问题
在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...
随机推荐
- Selenium2学习-036-WebUI自动化实战实例-034-JavaScript 在 Selenium 自动化中的应用实例之六(获取 JS 执行结果返回值)
Selenium 获取 JavaScript 返回值非常简单,只需要在 js 脚本中将需要返回的数据 return 就可以,然后通过方法返回 js 的执行结果,方法源码如下所示: /** * Get ...
- search支持多种标签
织梦的搜索页面支持dede标签的方法一 打开文件:include/arc.searchview.class.php 找到: require_once(DEDEINC."/taglib/hot ...
- .net变量判断
<div class="AccountLevel" style="margin-top: 15px;"> <sp ...
- 常用公共的css的样式
html{-webkit-text-size-adjust:none; /*解决chrome浏览器下字体不能小于12px*/} body{overflow-x: hidden; font-size:1 ...
- angularjs 获取地址传参
.controller('CityCtrl', function ($scope, $location,$ionicModal) { 注入location服务 $scope.name = $locat ...
- 商业智能BI和ERP的融合之路
企业在发展过程中为了更好的跟上同行业的步伐,甚至是为了在众多企业中脱颖而出,他们会主动寻求全面的企业解决方案.但是由于行业的快速发展,需求的不断增长,市面上的智能软件层出不穷,这也给了企业选择的困难. ...
- 第四篇 Replication:事务复制-订阅服务器
本篇文章是SQL Server Replication系列的第四篇,详细内容请参考原文. 订阅服务器就是复制发布项目的所有变更将传送到的服务器.每一个发布需要至少一个订阅,但是一个发布可以有多个订阅. ...
- javascript设计模式学习之十四——中介者模式
一.中介者模式的定义和应用场景 中介者模式的作用在于解除对象之间的紧耦合关系,增加一个中介者之后,所有对象都通过中介者来通信,而不是互相引用,当一个对象发生变化的时候,仅需要通知中介者即可.从而将网状 ...
- webService调用的N种方式
一.服务器端代码 新建一个web Service Project工程(貌似普通的java工程也可以,这里不太明白各种webService的框架有什么区别),建立如下的类: package com.bo ...
- 查找g++文档的方法
http://www.gnu.org/ -> Software(http://www.gnu.org/software/software.html) ->搜索 "gcc" ...