有比较厉害的前端程序员嘛，请教一些前端翻页问题

This topic created in 4226 days ago, the information mentioned may be changed or developed.

最近在研究在线杂志，找了很多的前端js库，turn.js,flipbook等等都看了，但是都不是我想要的那种，不是能够支持视频，音频的html5的前端翻页库。

或者有没有大牛能够告诉我怎么实现，最麻烦的就是视频的翻页，如果翻页太复杂，用其他效果实现类似功能也可以，主要就是想做一个在线的多媒体杂志。

求前端大牛指点迷津。或者有没有比较好的电子在线杂志推荐的，当然要html的，flash的就不用了

前端

杂志

turn.js

27 replies • 2017-01-29 08:59:34 +08:00

airyland

Nov 11, 2014

翻页跟页面内容无关啊。音频播放，视频播放还是自己控制。

wskongdesheng

Nov 11, 2014

视频是在需要翻页的页面内的

wskongdesheng

Nov 11, 2014

视频怎么样实现翻页效果呢

airyland

Nov 11, 2014

@wskongdesheng 视频里面的翻页效果？
进入有视频的页面播放视频，进入下一页时停止上一页里面的视频的播放。

dong3580

Nov 11, 2014

excoloSlider这个呢？视频嵌入div，用这个控件切换翻页，类似的不少，我已经在用了，

@airyland 说的对，翻页跟内容无关，

wskongdesheng

Nov 11, 2014

视频内嵌到杂志里面，如果杂志翻页，视频也要实现相应的翻页效果，比如弯曲，淡入淡出

wskongdesheng

Nov 11, 2014

@dong3580 谢谢，我研究下

wskongdesheng

Nov 11, 2014

@dong3580 我的意思是模仿书本的翻页效果，例如弯曲，掀页

dong3580

Nov 11, 2014

@wskongdesheng
你确定了自己的需求？
“如果杂志翻页，视频也要实现相应的翻页效果”，这个麻烦吧。
我给你的是翻页面的js，不是视频翻页效果。

wskongdesheng

Nov 11, 2014

@dong3580 嗯，就是这个，所以我才不知道怎么实现嘛

wskongdesheng

Nov 11, 2014

@dong3580 要不然杂志有翻页效果，视频在那梗着，体验很差

dong3580

Nov 11, 2014

@wskongdesheng
sina博客右上角都有鼠标移到flash上会有翻页的效果，具体没研究过。
你可参考一下，譬如：

http://blog.sina.com.cn/s/blog_677b57240100rz2k.html

wskongdesheng

Nov 11, 2014

@dong3580 turn.js就是能够实现图片和文字的翻页效果，但是我杂志里如果内嵌视频的话就没办法了

dong3580

Nov 11, 2014

@wskongdesheng

我说过，翻页和内容没关系，视频只是内容的一部分，
你的“要不然杂志有翻页效果，视频在那梗着，体验很差”从何而来呢？
翻页了了，当然内容都被切换了，何来“视频在那梗着”呢？
感情你没表达好你的需求，或者我理解能力有问题。

wskongdesheng

Nov 11, 2014

@dong3580 视频内嵌在杂志的div里，但是turn.js的话只会处理图片和文字，所以翻页时图片和文字就会有弯曲效果，但是视频还是原样，很不协调。

wskongdesheng

Nov 11, 2014

@dong3580 http://www.turnjs.com/#samples/magazine1/9
就是这种翻页效果，但是视频没有变化，只支持图片

septem123

Nov 11, 2014

对视频的最后一帧进行截图然后当做图片放到原视频区域翻页？

wskongdesheng

Nov 11, 2014

@septem123 怎么截图？

septem123

Nov 11, 2014

@wskongdesheng phantomjs 这个自动化测试工具有全屏截图功能截一部分应该也行我没有深入研究

ratatata

Nov 11, 2014

好像 canvans 是能够截图的，翻页的时候暂停视频，截图，视频替换成图片，翻页就可以了。

wskongdesheng

Nov 11, 2014

求范例

septem123

Nov 11, 2014

<canvas> API 的 ctx.drawImage(video, 0, 0) 方法可以轻松地将 <video> 帧绘制到 <canvas> 上。当然，既然我们通过 getUserMedia() 获得了视频输入，就可轻松地使用即时视频创建照相亭应用了。

wskongdesheng

Nov 11, 2014

@septem123 膜拜

neutrino

Nov 11, 2014

那如果是一边播放一边翻页呢。。

kookxiang

Nov 11, 2014 via Android

我记得有个HTML5演示就有视频的动画，应该是 22 楼那个

willin

Nov 11, 2014

自己.手写- -

voidtools

Jan 29, 2017

楼主， site 了 v 站，只发现你的帖子涉及了 Flipbook 技术。

想请教为啥这里面的 swf 打不开。听说是加密了。我需要批量提取里头的文本层.