1. 如何正确选择播放器
播放器主要涵盖H5、Flash以及自适应三大类别。在实际操作中,我们推荐优先选用自适应播放器,此类播放器能依据设备、浏览器和网络协议自动挑选最适宜的播放模式。然而,有一点必须留意,若视频内容系加密形式展示,则必须选用Flash播放器,因为现阶段H5播放器尚不具备加密播放的功能。
2. 手工启用H5播放器的方法
开启H5播放器的方式有两种可供挑选:一是直接调用H5播放器的JavaScript脚本,这一方式适用于对H5播放器有特定需求的场景;二是选用自适应播放器,并将相应属性设为true,系统便会适时自动切换至H5播放器。
3. 自适应播放器的适配原则
自适应播放器会依据终端的种类、浏览器的版本、配置的参数以及网络协议等多种要素,自动挑选出最合适的播放模式。其核心适配原则涵盖了:首先采用H5播放器,若H5播放器无法实施,则会考虑其他替代选项,除非用户明确要求使用特定类型的播放器。
4. 浏览器兼容性说明
尽管众多网络浏览器都能兼容Flash播放功能,然而,一些较新版本的浏览器可能已经将Flash的启用状态设定为默认关闭。在这种情况下,用户需亲自调整设置以激活Flash播放功能,具体的操作步骤可参照相应的技术指南。
5. 视频拖拽功能的实现条件
处理MP4和FLV格式的视频,若要实现拖拽播放功能,必须满足以下两个重要条件:首先,内容分发网络(CDN)必须提供拖拽播放所需的技术支持;其次,播放器必须能够向CDN发送包含具体时间信息的请求,并且CDN也必须能够提供相应时间点的视频片段。
6. 解决微信自动全屏播放问题
微信内置的浏览器以及QQ浏览器均具备视频自动切换至全屏播放的能力,这一特性主要源自腾讯浏览器独有的配置。尽管我们无法彻底关闭该功能,但我们可以通过启用同层播放的选项,从而有效解决视频内容覆盖网页DOM元素所带来的不便。
7. 微信中视频自动播放的实现
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlay() {
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});
wx.ready(function() {
var video=$(player.el()).find('video')[0];
video.play();
});
};
// 解决ios不自动播放的问题
autoPlay();
</script>
为了在微信平台上实现视频自动播放的功能,必须执行一系列复杂的技术步骤。这包括开发者对微信JS-SDK中特定功能的调用,以及确保在用户进行互动操作的事件触发之后,才开始执行视频播放的程序。
8. 设置初始播放位置
var seeked = false;
player.on('canplaythrough',function (e) {
if(!seeked)
{
seeked = true;
player.seek(100);
}
});
针对H5播放器,我们能够调整其自定义属性,进而决定视频的初始播放点。开发者拥有完全的自由,他们可以选择移除多余的属性,亦或是直接对播放器的某些功能进行操作,来设定视频的起始播放位置。若打算更换视频内容,必须先终止当前的播放器实例,随后利用新的视频标识重新构建播放器。
var seeked = false;
player.on('loadedmetadata',function (e) {
if(!seeked)
{
seeked = true;
player.seek(20);
}
});
9. 定时获取播放时间的实现
安装了时间控制设备后,播放器每秒钟都会进行一次查询当前播放时间的动作,以此实现对播放进度的不间断跟踪。同时,还需留意,在视频暂停、遇到播放故障或播放完毕的情况下,应立刻终止定时器的运行,以防止产生不必要的资源消耗。
skinLayout: [
{
name: "bigPlayButton", align: "blabs", x: 30, y: 80},
{
name: "H5Loading", align: "cc"
},
{
name: "controlBar", align: "blabs", x: 0, y: 0,
children: [
//{name: "progress", align: "tlabs", x: 0, y: 0},
{
name: "playButton", align: "tl", x: 15, y: 26},
{
name: "timeDisplay", align: "tl", x: 10, y: 24},
{
name: "fullScreenButton", align: "tr", x: 20, y: 25},
{
name: "volume", align: "tr", x: 20, y: 25},
]
}
]
10. H5播放器UI定制
H5播放器的操控元件,其尺寸与排列方式皆可运用CSS技术进行个性化的调整。开发者能够通过x、y坐标属性对按钮的具体位置进行精准定位,此外,通过编辑样式表,他们还能对按钮的尺寸进行随心所欲的调整。
player.reloaduserPlayInfoAndVidRequestMts(newVid, newPlayAuth)
11. 手机端小窗播放方案
在使用移动设备时,用户可调整相关设置以确保视频在小窗口内顺利播放,并防止其自动切换至全屏模式。要达成此目的,需对各类浏览器进行有针对性的参数调整。
//销毁
flashPlayer.dispose();
$('#flashPlayer').empty();
//重新创建
flashPlayer = new Aliplayer({
id: 'flashPlayer',
autoplay: true,
playsinline:true,
vid: newVid,
playauth: newPlayAuth,
useFlashPrism:true
});
12. IE浏览器兼容模式设置
针对IE10及更早版本,我们需在网页顶端添加一个meta标签,此标签能确保浏览器以最兼容的模式展示内容,唯有如此,播放器方能顺利播放。
var timer = null;
function getTime()
{
var currentTime = player.getCurrentTime();
//to do
timer = setTimeout(getTime,1000);
}
//清除定时器
function clear()
{
if(timer)
{
clearTimeout(timer);
timer = null;
}
}
player.on('ended',function (e) {
clear();
});
player.on('pause',function (e) {
clear();
});
player.on('error',function (e) {
clear();
});
13. 跨域问题的解决方案
若在播放m3u8视频过程中遇到跨域问题,需在视频源地址的最高层目录下设置一个特定用于解决跨域问题的配置文档,此文档需使用.xml格式;同时,该配置文档中需详尽列出哪些域名具备访问播放器的权限。
14. 封面图片无法显示的解决方法
.prism-player .prism-big-play-btn {
width: 45px;
height: 45px;
background-size: 128px 256px;
}
若图片封面在播放器中未能正确展示,需先检查图片的网址是否准确无误,接着要核实服务器是否具备处理跨域请求的能力。此外,还需考虑是否是由于缓存问题所导致,此时可以尝试清除缓存,或者换用一个新的图片链接进行测试。
15. 视频点播优惠套餐介绍
skinLayout: [
{
name: "bigPlayButton", align: "blabs", x: 30, y: 80},
{
name: "H5Loading", align: "cc"
},
{
name: "controlBar", align: "blabs", x: 0, y: 0,
children: [
{
name: "progress", align: "tlabs", x: 0, y: 0},
{
name: "playButton", align: "tl", x: 15, y: 26},
{
name: "timeDisplay", align: "tl", x: 10, y: 24},
{
name: "fullScreenButton", align: "tr", x: 20, y: 25},
{
name: "volume", align: "tr", x: 20, y: 25},
]
}
]
为了降低创业者的使用门槛,视频点播服务特别推出了一系列性价比高的体验套餐。这些套餐内容十分丰富,包括10GB的流量、50GB的存储空间以及100分钟的转码时长。仅需9.9元,这样的套餐价格对个人开发者和小微企业来说非常合适,完全可以满足他们进行产品体验的需求。用户只需在活动页面轻松完成购买和支付流程。
工作时间:8:00-18:00
电子邮件
扫码二维码
获取最新动态