如何实现视频封面图的动态预览效果

使用场景

在播放视频的入口页面,每个视频的封面图多数是静态图片,观众需要点击进入视频播放才能看到视频内容;如果想让观众不进入视频播放页面即可快速浏览视频内容,可以通过封面图的动态预览效果来实现。
当鼠标悬停在视频封面图上时,会加载动态预览图,并会随着鼠标的移动显示不同时间点的视频截图。

Demo效果

dpd_new (3)

实现方式

首先在页面中引用demo中的polyv-cover-preview.js文件,然后在需要显示动态预览效果的页面,嵌入以下代码:

<div data-vid="f13e9957353bbc54d8922d1cbd55ab9a_f" class="polyv-cover-preview" style="width:160px; height:90px;"></div>

其中,id为点播视频的vid,style中的width、height可设置为页面中需要显示的封面图宽高。
Demo请点击这里下载。

注意事项

只有时长大于5分钟的视频才会生成动态预览图,时长小于5分钟的视频只会显示静态的封面图。

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

视频清晰度与码率

随着4G普及、光纤调速,网络传输迅速提升,为优化用户播放体验。保利威将对视频转码文件的默认码率和分辨率进行适当调整。
调整之后,画质将得到近一步提升,满足用户对更高清视频播放需求。
改动详情如下表所示:(码率单位:kbps)
视频码率
POLYV将于2018年11月15日进行视频默认码率调整,但不影响老用户使用;老用户将保持现有默认码率设定,如需更换成新码率,请联系保利威客服团队;
2018年11月16日00:00后注册的新用户,将默认使用新的码率及规则进行编码。

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

保利威视频审核机制

视频审核的标准是什么?

· 禁止上传任何有违国家法律法规的视频;
· 禁止上传具有色情内容的视频;
· 禁止上传侵犯其他任何人的合法权益的视频;
· 禁止上传含有涉及版权问题的影视片断;

如何审核:

内容安全基于深度学习技术, 提供图片、视频,文字等多媒体的内容风险智能识别服务,降低色情、暴恐、涉政等违规风险。

审核机制:机器+人工双重审核

1.机器审核通过,审核部门不定时抽查视频内容
2.机器审核不通过,交由人工复审

如何处理违规文件:

删除相关文件并对账户封停处理。因用户违规在本网站的上载或发布的内容,而导致任何第三方提出索赔要求或衍生的任何损害或损失,由用户承担全部责任。

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

WebView常见问题

一、简介

  目前部分网页使用WebView控件来播放Polyv点播视频或直播视频时,会产生以下问题,在此提供demo供参考方便快速解决问题。

安卓demo下载

iOS demo 下载(Git,建议)

iOS demo下载

  安卓webview demo描述
 - demo中实现了点击全屏按钮功能(ps:demo中虽然实现了全屏,但是从竖屏切换到横屏全屏,或者从横屏切换到竖屏全屏,需要开发者自己实现)

  IOS webview demo描述
 - demo中分别演示使用UIWebview、WKWebview

二、FAQ

1. webview 引用直播观看页打开白屏

不可以随意劫持Polyv请求的cookie信息,可能导致播放页面无法正常跳转,出现白屏现象。

2. 播放器区域白屏

由于运营商劫持的可能性,建议引用https的页面地址解决。

3. iOS建议使用 WKWebView

视频在h5页面内播放属性是 inline playback, UIWebView 默认开,WKWebView 默认关。
UIWebView 在 iOS 11.3 上设置 inline playback 无效,iOS 11.0.3 上可以,所以不建议继续使用 UIWebView。

苹果官方建议:
从iOS 8.0和OS X 10.10开始,使用WKWebView将Web内容添加到您的应用程序。不要使用UIWebView或WebView。
Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView.

4. ios配置

iOS 需要以下配置,设置 info.plist NSAppTransportSecurity 字段,允许非HTTPS连接访问。

加入 NSAllowsArbitraryLoadsInWebContent 键,允许任意web页面加载,或设置 NSAllowsArbitraryLoadsYES 来禁用ATS。

测试发现:使用NSAllowsArbitraryLoadsInWebContent在 iOS 10.3 上视频可能无法播放,所以建议直接关闭ATS。

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

默认小屏播放(WKWebView)
加载网页后网页里有播放器,但是iOS11上的播放默认是全屏播放,没有办法小屏播放,这里我们就要进行下设置了

 //配置信息
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
//设置为YES即可
config.allowsInlineMediaPlayback = YES;
//在初始化时讲配置信息传入
WKWebView *mWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight - TopFullHeight) configuration:config];

5.Android 虚拟按键适配动态调整布局

如下图华为mate8机型为例,部分webview页面底部内容被虚拟按键遮挡问题,需要处理Android调整webview适配底部返回键等虚拟键盘。

6.Android HTTPS页面引用HTTP资源的问题

Android5.0及以上系统WebView默认不支持同时加载Https和Http混合模式,若直播观看页嵌入https页面,需要增加以下代码解决播放

//允许混合模式(http与https)
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
  settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
 }

7.Android 默认视频封面灰色播放按钮美化


安卓webview video标签默认显示如图播放按钮背景。

通过Web增加以下代码后美化如上图显示,除以下设置外同样也可以自定义视频封面图片:

import android.graphics.Bitmap;
import android.webkit.WebChromeClient;

public class WebChromeClientCustomPoster extends WebChromeClient {
  @Overried
  public Bitmap getDefaultVideoPoster() {
    return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888);
  }
}
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

移动端web视频播放器按钮太小

用手机浏览器打开保利威视的视频,有时会出现播放器按钮太小的情况,此时只需在<head>中加入下面这段代码即可解决<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no">。

按钮太小1 按钮太小3 按钮太小2

 

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

多终端代码实现原理

多终端代码的核心代码在https://player.polyv.net/script/polyvplayer.min.js中,这段js会根据播放的客户端去判断使用flash代码还是HTML5代码。

如果在PC端访问用多终端代码写的页面,打开浏览器的开发者工具,可以发现这段js在PC端浏览器中会解析为带object标签的flash代码。

image001

如果在移动端访问用多终端代码写的页面,通过电脑中用远程调试手机浏览器web页面,打开浏览器的开发者工具,可以发现这段js在移动端浏览器中会解析为带video标签的HTML5代码,video标签的src属性的值为MP4链接(非加密视频)或m3u8链接(加密视频)。

2

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

使用预览页面实现多终端代码功能

目前很多cms网站自带的编辑器无法插入javascript代码,但是普遍都可以插入html代码。由于POLYV的视频预览页面的网页代码是用多终端代码写的,可以通过iframe标签嵌入预览页面去实现多终端代码功能。

下面示范如何通过CKEditor编辑器插入预览页面,实现多终端代码的功能。

打开网站的管理后台的编辑器,点击在左上角的“源码”按钮(有些编辑器的“源码”按钮和“html”按钮是在不同的地方,一般是在左上角),在编辑器的空白处插入以下示例代码,最后保存编辑页面。

5

预览页面的链接在POLYV后台点击“预览页面”获取得到。

预览视频页面

iframe嵌入预览页面的示例代码:

<iframe width=640 height=360 src="http://v.polyv.net/uc/video/iframeview?vid=c19cc119130f16555c2020fa5416a3cb_c&playerwidth=100" frameborder=0 allowfullscreen></iframe>
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

视频花屏问题

1、关闭硬件加速

原因:硬件加速导致视频计算机资源调用

解决办法:关闭硬件加速,操作如图,找到启动硬件加速,把前面的勾选去掉。

1

2

2、更新Flash player

原因:Flash player版本较低

解决办法:升级Flash player

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

移动端无法播放视频

1、IOS系列

1)支持iOS6以上版本的设备进行视频播放,iOS6的高版本可以支持,低版本无法支持

2)视频无法播放时,清空浏览器缓存信息,刷新后播放

3)系统版本无问题,仍有视频播放问题,请联系售后客服

2、安卓系列

1)视频无法播放时,清空浏览器缓存信息,刷新后播放

2)系统版本无问题,仍有视频播放问题,请联系售后客服

3、Window phone

POLYV平台目前不支持window phone的视频播放

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...