前言：今天遇到一个客户需求，用户在官网中放置了视频，供用户浏览，并且使用了ckplayer前端播放器，这时出现了一个问题，就是使用ckplayer时，用户在IOS系统的微信浏览器中无法播放视频，只能通过Safari打开才能正常播放，这一体验对用户来说是极差的，所以今天来动手解决一下这一问题。
首先我们尝试解决ck播放器的问题，但是经过一顿摸索，发现始终无法解决，从网上搜文档说可以使用ckplayer x2来解决这一问题，我们没有进行尝试，而是从曲线救国的思路来尝试解决它，我们尝试将ckplayer的对象要加载两次，就是第一次加载之后要调用remove() 再重新初始化就可以了,而且第二次初始化还不能通过js自动执行(setTimeout click等测试过都不行)
必须在div中通过点击事件销毁再重新创建就可以了 这里面应该是有点什么问题 希望CK官方能检查并修复一下
下面附代码:
<body id="page-top">
<div id="content">
<div class="video" onclick="loadPlayer()"></div>
</div>
<script>
function loadPlayer(){
player.remove(); //通过div点击事件销毁实例并重新载入
player=null;
$('.video').html('');
$(".video").removeAttr('onclick'); //移除onclick事件防止重复销毁再创建
var videoObject = {
container: '.video', //容器的ID或className
poster:'视频封面地址',
video:'视频地址',
autoplay: true, //第二次开启自动播放 效果就是用户点一下div就能播放了
rightBar:true, //类似于只加载了一次但是没有开启自动播放的效果
screenshot:true,
smallWindows:true,
playbackrateOpen:true,
webFull:true,
theatre:true,
ended:'.video-ended',
};
player=new ckplayer(videoObject); //重新实例化一次就可以播放了
};
var videoObject = {
autoplay:false,
container: '.video', //视频容器
poster:'视频封面地址', //封面图片
video:'视频地址', //视频地址
loaded:'loadPlayer()'
}
var player=new ckplayer(videoObject);//网页加载时实例化一次ckplayer
</script>
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
这种方式经过测试是可行的，但是总是感觉怪怪的，这时候，很纠结，因为考虑到只有ios+微信浏览器才会出现这一问题，其他设备比如安卓、PC都没有这一问题，哪怕使用IOS的Safari来打开，也是没有问题的。
这时我们考虑，放弃ios+微信端的ckplayer方案，转用video标签来做。下面附上判断代码：
<script type="text/javascript">
var isIOSWeChat = /(iPhone|iPad|iPod|iOS).*MicroMessenger/i.test(navigator.userAgent);
if (isIOSWeChat) {
// 在iOS微信中打开时执行的代码
document.write('<video class="edui-upload-video vjs-default-skin video-js" poster="视频封面" controls="" preload="none" width="420" height="280" src="{content:ext_videohaha}" data-setup="{}"><source src="视频地址" type="video/mp4"></video>');
} else {
// 不在iOS微信中打开时执行的代码
document.write('<div class="video" style="width: 100%;height:600px;"></div>');
var videoObject = {
container: '.video',
poster: '封面',
logo: 'sitelogo',
video: '视频地址',
};
new ckplayer(videoObject);
}
</script>
我们通过前端来判断是否是ios+微信的设备，如果是，不加载ckplayer了，转用video标签，这总能播放了吧~哈哈 又是曲线。
但是好事多磨，我们发现video标签在ios设备下点击播放会自动全屏，这该死的设定，用户需要全屏自己能点，为啥要自动呢？而且有些页面的视频是嵌入页面的，不适合全屏播放。
这时候我们需要继续解决这一问题，经过查阅文档，这一问题解决起来就轻松很多了。我们只需要在标签里面写上：
webkit-playsinline='true' playsinline='true'
就能完美解决，看下完整代码：
<video controls="controls" src="images/video.mp4" id="Video" poster="images/vImg.jpg" preload="auto" loop="true" width="100%" height="auto" webkit-playsinline='true' playsinline='true' ></video>
将改代码替换到上面的script中即可。
延申：
1、标签定义：
<video> 标签定义视频，比如电影片段或其他视频流，可以放置视频资源，并添加视频控件。
支持的浏览器：Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。
注：Internet Explorer 8 以及更早的版本不支持 <video> 标签。
2、video属性：
属性名 具体介绍 src 要播放的视频的 URL poster 视频封面；没有播放时显示的图片，规定视频正在下载时显示的图像，直到用户点击播放按钮。 preoad 预加载。如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 autoplay 自动播放；视频在就绪后马上播放。 loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。 muted 如果出现该属性，视频的音频输出为静音。 controls 如果出现该属性，则向用户显示控件，比如播放按钮，浏览器自带的控制条 width 设置视频播放器的宽度 height 设置视频播放器的高度 3、poster的具体介绍：
poster 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。所有主流浏览器都支持 poster 属性。
如果未设置该属性，则使用视频的第一帧来代替。
注：测试了一下，android若设置该属性但未设置图片，是会显示第一帧，但ios不行，会显示空白
所以如果需要显示视频封面且适配俩端，不能只写 <video poster></video>，需要指定封面图片：<video poster=‘url’></video>
其中 url值 描述URL指定图片文件的URL。可能值：
绝对URL – 指向另外一个站点URL (如：href=”http://www.example.com/poster.jpg”)
相对URL – 指向同个站点的URL (如： href=”poster.jpg”)
好了这篇文章暂时写到这里，如果您有更好的解决方案，欢迎下方评论区见~
