html视频试看代码,m3u8地址的预览与试看功能更能吸引用户

通过给m3u8地址加上控制参数可实现预览和试看视频的功能,这样就可以让用户在未注册或未付费状态下只能试看部分内容,引起用户对整个视频内容的兴趣,引导他们进一步注册或付费看完整视频。

示例如下:

视频预览:

通过后台复制的m3u8地址,得到以下内容:http://localhost:2100/20200505/pUhFXqcM/index.m3u8,该地址可以观看视频的完整内容。

如果需要预览视频概况,给m3u8地址加上以下参数:

http://localhost:2100/20200505/pUhFXqcM/index.m3u8?segments=5&time=10

segments:表示按时间顺序平均提取的段数

time:表示提取每段的时长

以上地址就是平均提取该视频5段内容,每段提取10秒,生成一个预览的m3u8地址即可概览视频概况。

因为ts的分段时长可能跟指定的时长不一致,所以得到的总时间可能是一个接近指定值的约数。

视频试看:

同样以刚才的m3u8地址为例,

http://localhost:2100/20200505/pUhFXqcM/index.m3u8可以观看视频的完整内容。

http://localhost:2100/20200505/pUhFXqcM/index.m3u8?start=10&end=60

start:指定获取视频内容的开始时间

end:指定获取视频内容结束时间

以上参数就是从视频的第10秒开始到60秒结束,大概内容有50秒时长。

该方法的优势:

由于获取内容是动态参数指定,不需要重新转码来获取文件内容,也不会生成多余的文件来占用硬盘空间,升级你的软件即可让原来已经转码好的内容拥有此功能。

如何控制防盗?

在后台防盗设置——防盗密钥一项,设置上一个密钥,参考http://www.ppvod.com/dianbo/wenti/485.html的密钥算法,给完整的m3u8地址带上防盗功能。

由于预览和试看都是不需要指定sign(防盗密钥)的,如果盗链的人需要获取完整的m3u8内容是需要带上密钥算法才能获取的,所以相对是安全的。

使用限制:

预览和试看的总时长不能超过3分钟

在试看和预览参数后面不需要带sign参数(防盗密钥算法)

http://www.ppvod.com/dianbo/xiazai/440.html

PPVOD全能直播软件下载地址:http://www.ppvod.com/zhibo/xiazai/511.html

在线服务QQ:250093148

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的 HTML 和 CSS 代码示例,可以创建一个包含图片、文字和试看视频的电影详情介绍页面,并提供滚动条。 HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>电影详情介绍页面</title> <style> /* 设置页面样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* 设置图片样式 */ .movie-image { width: 100%; height: auto; } /* 设置文字介绍样式 */ .movie-description { margin: 20px; overflow-y: scroll; height: 300px; } /* 设置视频样式 */ .movie-video { margin: 20px; width: 100%; height: 400px; } </style> </head> <body> <!-- 插入电影图片 --> <img class="movie-image" src="movie-image.jpg" alt="电影海报" /> <!-- 插入电影文字介绍 --> <div class="movie-description"> <h2>电影名称</h2> <p> 电影剧情简介:这里是电影的简短描述,包括电影的类型、导演、演员等信息。这段文字可能会超出显示区域,因此提供了滚动条以便用户查看完整内容。 </p> <p> 电影详细介绍:这里是电影的详细介绍,包括电影的剧情、演员、导演等信息。这段文字可能会超出显示区域,因此提供了滚动条以便用户查看完整内容。 </p> </div> <!-- 插入电影试看视频 --> <div class="movie-video"> <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe> </div> </body> </html> ``` CSS 代码: ``` /* 设置页面样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* 设置图片样式 */ .movie-image { width: 100%; height: auto; } /* 设置文字介绍样式 */ .movie-description { margin: 20px; overflow-y: scroll; height: 300px; } /* 设置视频样式 */ .movie-video { margin: 20px; width: 100%; height: 400px; } ``` 请注意,这只是一个简单的示例,您可以根据您的需求进行更改和扩展。另外,视频的src属性需要替换为您自己的视频ID。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值