android html5播放器,用 HTML5 播放器在 iOS 或 Android 等移动设备上播放视频-程序员宅基地

技术标签: android html5播放器  

如果你想把自己网站上的视频弄得能在 iOS 或者 Android 设备上播放,你需要想两个事儿,一个是你网站上的视频播放器要支持 HTML5,还有你的视频得支持在这些设备上看。

网站的视频播放器我们可以使用 JW Player,这个播放器有三种模式,Flash,HTML5,下载。就是如果浏览器不支持Flash模式,播放器会切换到 HTML5 模式,都不支持的话可以提供一个下载视频的链接。(你可以设置这几种模式的先后顺序)

让视频能在 iOS 和 Android 上播放,可以使用 AVC(h.264) 编码视频,用 AAC 编码音频。编码视频可以用 Handbrake 这个软件。

a8c3206879ac0d469d6925d66c3c120b.png

(使用了 Glow 皮肤的 JW Player 播放器 )

视频

我们经常会说什么格式的视频,比如 .mp4 格式的视频,这个 .mp4 只是一个容器,这个容器里面可能会有好几个东西,比如视频流,音频流,也可能还包含字幕。播放器在播放一个视频的时候,它先看要看一下视频使用的是什么类型的容器(.mp4, .avi …),里面都存放在了什么样的视频流和音频流,然后播放器会把视频流解码成一堆图像显示出来,同时也会解码音频流发送给设备的喇叭。

把视频放在网上,你要考虑它的质量和体积,质量不能太差,体积不能太大。所以我们要处理一下,用 h.264 或者叫 AVC 这种格式来编码视频,用 AAC 来编码音频,这是目前比较好的选择。它们可以在保证质量的同时减小视频的体积。

h.264当初的设计就是使用一种编码格式针对不同速度的带宽和不同速度的CPU。h.264 使用了一个叫 profiles (配置文件)的概念,不同的 profile 针对不同的情况进行优化。

在移动设备上可以使用低的配置文件,比如 baseline profile , 在桌面电脑上可以使用任何的配置文件:baseline, main, high。

在CPU速度慢和低带宽的情况下就使用 baseline profile ,相对带宽充足,CPU 速度快的设备上可以播放 main 可 high profile 的 h.264 视频。

并不是使用 main 或 high profile 的 h.264 视频完全不能在移动设备上观看,因为现在的移动设备的速度也越来越快,宁皓网的视频用的是 main profile ,在新的 iPhone 或者 iPad 上观看也没什么问题,不过有朋友反应在以前的 iPad 上看会出现播放一半没有图像的情况,我觉得这可能是因为宁皓网的视频使用了 main profile 。

编码软件

你需要一个编码软件来处理视频的视频流和音频流,推荐用 Handbrake。开源软件,所以你可以免费用,支持多平台,不管你用的是Windows 还是 Mac。

4f86d5c465d9c9c0de8946f3cbae8c08.png

(Handbrake 软件截图)

播放器

你的网站需要一个视频播放器,推荐 JWplayer。你可以免费用,不过免费版在视频一开始播放的时候会显示一个JWplayer 的水印,你可以付费去掉它。

JW Player 挺强大,可以为它添加插件,可以自定义播放器的皮肤,它的官网上已经有一些现成的播放器皮肤可以直接使用。

JW Player 还有 Javascript API,如果需要你可以定制这个播放器,让它更强大。

在网页中嵌入 JW Player 的方法

注:下载的时候,需要填写你的Email地址,另外,推荐你去掉“Include Viral, a video sharing plugin”前面的对号。

解压以后,有一堆文件,你只需要其中的两个:

jwplayer.js

player.swf

然后像这样嵌入到网页中:

JW Player goes here

jwplayer("mediaplayer").setup({

flashplayer: "player.swf",

file: "amazingspiderman.mp4",

width: "960",

height: "400",

skin: "glow.zip",

image: "amazingspiderman.png",

});

flashplayer:flash播放器的地址

file:视频所在的位置

width:视频的宽度

height:视频的高度

skin:播放器的皮肤(样式)

image:视频截图

注:IE 浏览器会有一些奇怪的错误,如果你发现嵌入的播放器不能显示,检查嵌入播放器的最后一个选项,去掉这个选项后面的“ , ”号,上面示例中 image 是嵌入播放器的最后一个选项。

在 JW Player 的官网下载你想要使用的播放器皮肤,如果你想在 HTML5 模式下使用同样的皮肤,你需要把这个皮肤解压到与皮肤一样名称的文件夹里,比如上面的例子,我们使用的是 glow.zip 这个皮肤,解压以后,皮肤里面的文件都会在 glow 这个文件夹里,并且,glow.zip 和 glow 文件夹必须在同一个文件夹里。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_29635919/article/details/117350001

智能推荐

北斗三号频点_Wideband全频点北斗信号模拟器-程序员宅基地

文章浏览阅读1.2k次。LabSat 3 Wideband是一种具有3个独立可调节宽带通道的RF信号录制和回放系统。它可录制和回放大多数GNSS信号,甚至包括少量非GNSS信号。三个RF通道全部共用一个共同采样速率,可从10MHz调节至60MHz。每个信号可选择1、2或3比特I和Q信号量化。根据通道带宽和量化组合情况,LabSat 3 Wideband会调节可用的RF通道数量,以将录制数据带宽保持在一个能确保连续文件传送..._labsat3频点

java 分段读取数据_java _io_ .read()分段读取字节-程序员宅基地

文章浏览阅读210次。java _io_ .read()分段读取字节发布时间:2020-05-06 11:22:43来源:51CTO阅读:256作者:wx5d21d5e6e5ab1byte[] flush =new byte[n] //字节数组充当缓冲容器.read(flush) //每次返回读取的n个字节,当数据字节数不够时,返回实际字节数int len=-1; //接受read(flush)返回的实际长度Str..._如何分段读取byte

oracle 函数,oracle函数-程序员宅基地

文章浏览阅读55次。1、Oracle中函数大致可以分为哪两类?单行函数、聚合函数2、单行函数可以分为哪些?字符函数、数字函数、转换函数、日期函数、正则表达式函数3、字符函数有哪些?length(xx)lower(xx)、upper()例如:select * from emp where ename=UPPER('&STR');--用户输入为大写concat(m,n)--与拼接字符串||相似initcap(xx..._oracle nanvl

计算机主机组件图,电脑主机结构图大全-程序员宅基地

文章浏览阅读2.3k次。电脑主机结构图大全导语:电脑主机分为多种结构组合而成,这些被称之为硬件,电脑主机结构图是怎样的?下面是小编为您收集整理的资料,希望对您有所帮助。1.机箱(必备)机箱作为电脑配件中的一部分,就是主机的外壳,它起的主要作用是放置和固定各电脑配件,起到一个承托和保护作用,此外,电脑机箱具有电磁辐射的屏蔽的重要作用,现在的高配机箱具有防辐射、防尘、加强散热、静音等多中功能。但由于机箱不像CPU、显卡、主板..._台式计算机信息技术设备内外结构图

AndroidStudio如何进行手机应用开发?_android studio开发app-程序员宅基地

文章浏览阅读3.9k次,点赞7次,收藏82次。Android手机应用因其搭载于手机,使用便捷,应用被大量开发使用。笔者使用手机多年,也用过许多手机软件,在使用的过程中,虽然手机软件能解决大部分问题,但在实际发展过程中,难免会有更多的特定需求的产生,手机商业软件更多的是面向大众,而且开发成本也不低,这就导致若要实现自己的需求,就必须自己进行手机应用开发。笔者之前有过开发手机应用的经历,当时学得比较浅,技术并未进行总结,导致安卓开发技术并未成为我的技能,为了总结安卓开发技术,本文重走安卓编程之路,从最基础的编译环境安装和创建第一个手机应用进行阐述。 _android studio开发app

【雕爷学编程】Arduino动手做(208)---使用Beetle ESP32 C3控制8X32位WS2812硬屏_esp32控制ws2812-程序员宅基地

文章浏览阅读294次。雕爷学编程,Arduino动手做,开源硬件,创客传感器,Beetle ESP32 C3开发板_esp32控制ws2812

随便推点

关于--windows能ping通linux的ip,但是无法访问linux的tomcat首页 的解决办法_windows可以ping通linux服务器,但是打不开服务器的网页-程序员宅基地

文章浏览阅读6.6k次。CentOS版本:6.8Windows操作系统版本:Win10Linux上的tomcat版本:7.0.65linux是使用的NAT模式,及共享主机的IP地址。本来想使用windows本地访问linux上的tomcat首页,结果一直访问不成功;但在windows下能够ping通linux的ip,这很明显就是linux的端口没有开放,所以就在linux上设置了一下防火墙,将以下配置加入到了..._windows可以ping通linux服务器,但是打不开服务器的网页

Dbeaver一次执行多条MySQL语句报错_dbeaver执行多条语句报错-程序员宅基地

文章浏览阅读969次。选择驱动属性,将allowMultiQueries设置为TRUE,然后点击确定即可。解决方法,打开编辑选项。_dbeaver执行多条语句报错

炼丹记之国家电投2020风电机组异常数据识别与清洗 baseline f1=0.858分享_2020 ccf 大数据与计算智能大赛 风电机组异常数据识别与清洗-程序员宅基地

文章浏览阅读2.9k次,点赞5次,收藏15次。赛题地址:https://www.datafountain.cn/competitions/451赛题任务:依据提供的12台风力电机1年的10min间隔SCADA运行数据,包括时间戳信息、风速信息和功率信息等,利用机器学习相关技术,建立鲁棒的风电机组异常数据检测模型,用于识别并剔除潜在的异常数据,提高数据质量。此任务未给出异常数据标签,视为聚类任务,为引导选手向赛题需求对接,现简单阐述异常数据定义。异常数据是由风机运行过程与设计运行工况出现较大偏离时产生,如风速仪测风异常导致采集的功率散点明显_2020 ccf 大数据与计算智能大赛 风电机组异常数据识别与清洗

java学习路线_在整个业务运营系统实施过程中强调:统一标准是基础,数据集成是手段,优化资源是目-程序员宅基地

文章浏览阅读1k次。自己在一个培训机构的网站上面看到java的学习路线,觉得挺好的,分享给大家,希望对大家的学习有所帮助。第一阶段Java语言基础Java语言概述、Java环境配置、基本语法、Java流程控制语句、常用数据结构掌握常见的数据结构和实用算法;培养良好的企业级编程习惯。Java面向对象Java类设计、高级类特性(封装、继承、多态)、异常处理、Java集合、泛_在整个业务运营系统实施过程中强调:统一标准是基础,数据集成是手段,优化资源是目

模型转换 PyTorch转ONNX 入门-程序员宅基地

文章浏览阅读1w次,点赞31次,收藏177次。本文主要介绍如何将PyTorch模型转换为ONNX模型,为后面的模型部署做准备。转换后的xxx.onnx模型,进行加载和测试。最后介绍使用Netron,可视化ONNX模型,看一下网络结构;查看使用了那些算子,以便开发部署。目录前言一、PyTorch模型转ONNX模型1.1 转换为ONNX模型且加载权重1.2 转换为ONNX模型但不加载权重1.3 torch.onnx.export() 函数二、加载ONNX模型三、可视化ONNX模型。_pytorch转onnx

VINS-Mono-IMU预积分 (八:预积分代码带读+对应推导公式)_vins中的与积分约束代码-程序员宅基地

文章浏览阅读249次。这个雅可比的作为是为了在零偏 $b_{a},b_{w}$ 在经过优化数值发生变化后不需要再重新进行预积分,因为实际上 $k+1$ 时刻的预积分是用 $k$ 时刻的零偏 $b$ 来进行的,当经过优化后 $k+1$ 时刻的零偏 $b$ 就会发生变化,理论上 $k+1$ 时刻的预积分应该是用 $k+1$ 时刻的零偏 $b$ 来进行才对,由于是优化后才获得,但是重新进行预积分又非常耗时,所以采用 $f(x+Δb)=f(x)+J^{x}_{b}·Δb$ 这样的方式来进行近似更新,从这个公式可以看出里面就必须要对零偏_vins中的与积分约束代码

推荐文章

热门文章

相关标签