zymedia在使用中碰到的问题

记笔记，免忘记！最近用到了视频插件zyMedia。这个插件的简介地址：https://github.com/ireaderlab/zyMedia

问题一：

首先视频的上方显示的标题，实例是这样写的data-config='{"mediaTitle": "《疯狂动物城》"}'；mediaTitle后面的值写死了好用，写成动态的不好用。下面是两种实现方法

1、<video poster="__PUBLIC__/wx/images/course/course_bg.jpg" data-config='{"mediaTitle": "<php>echo $title</php>"}'>

2、zymedia('video',{"mediaTitle":moviename,"autoplay": "true"});  这方法没有用过，但是在一篇csdn文章里面面写了可用 链接直通车链接直通车

问题二：

电脑、安卓上可以显示点击可播放视频，但是在ios则一直显示在加载视频。这个问题纠结了半天，在网上也找了很多种方法，可能代码不尽相同，所以....感觉有些方法于我这里没效果。现从网上大神处整理几种如下：

1、H5播放器内置播放视频   =>   文章链接直通车

只需要给video加上 webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow" 即可（重点是x5-playsinline=""起的作用）

<video  id="example_video_1" class="video-js" webkit-playsinline=""
playsinline="" x5-playsinline="" x-webkit-airplay="allow"
width="100%" height="100%" src="" preload="true">
</video>

2、video标签在ios微信不能播放（我使用这个解决了） =>   文章链接直通车

ios微信video标签设置preload为none，点击自定义播放按钮调用video.play()方法仅触发了play事件，没有进行视频播放（未进入playing、loadedData等事件）。补充：safari浏览器正常。

解决方法：将preload改为auto就可以正常播放，原因未知

new zymedia('video', {"autoplay": "true","preload": "auto"});

3、下载视频处理软件“格式工厂”对视频编码进行转换，转换成H265格式即可   =>   文章链接直通车

可能是我在格式工厂配置的时候没弄好，转换后，视频都全黑了，只有声音没有画面。

4、加微信监听   =>   文章直通车

//这样的写法在android 和ios下都不能生效  
$('#shakeVideo').play();  
//必须在weixin JSAPI的WeixinJSBridgeReady才能生效  
document.addEventListener('WeixinJSBridgeReady',function(){  
    $('#shakeVideo').play();  
},false); 

总结：

方法有很多，问题总能解决。网上还有很多很多的解决方法，如果哪位大神有不同的解决方法，请一定一定教我学习一下，谢谢！

问题三：

document.body.style.overflow = 'hidden';
    zymedia('video', {autoplay: true});  //这里会提示报错 undefined
    var screenheight = window.screen.height / 2;
    $("#modelView").width(window.screen.width);
    .....

所以加一个  new zymedia('video', {autoplay: true}); 就不提示报错 //如果{}里面只有一个参数可以如该插件一样不加""；如果有多个参数可必须打""否则报错

 

这个笔记就记录到这里后续使用这个插件还有问题再来更新！希望对你们有用！谢谢！

 

移动端H5视频页面坑之总结

html5网页中用video标签无法播放MP4视频的解决方法

微信端iphone 使用video标签播放不了视频

android、电脑可以播放.mp4的视频，ios无法播放解决办法

 

ios系统下不能自动播放视频

javascript中new关键字详解