微信小程序视频播放器

最新推荐文章于 2024-03-05 13:30:00 发布

一只不爱写代码的程序猿

最新推荐文章于 2024-03-05 13:30:00 发布

阅读量5.7k

点赞数 4

分类专栏：实战项目文章标签：小程序广告 html js

本文链接：https://blog.csdn.net/qq_32202709/article/details/105821709

版权

实战项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

微信小程序视频播放器
1，视频播放器首页 wxml

<swiper class="swiper" indicator-dots='{{swipterSet.indicator_dots}}' indicator-color='{{swipterSet.indicator_color}}' indicator-active-color='{{swipterSet.indicator_active_color}}' autoplay='{{swipterSet.autoplay}}' current='{{swipterSet.current}}' interval='{{swipterSet.interval}}' duration='{{swipterSet.duration}}'  circular='{{swipterSet.circular}}'
vertical='{{swipterSet.vertical}}' previous-margin='{{swipterSet.previous_margin}}'
next-margin='{{swipterSet.next_margin}}' display-multiple-items="{{swipterSet.display_multiple_items}}" skip-hidden-item-layout="{{swipterSet.skip_hidden_item_layout}}" easing-function="{{swipterSet.easing_function}}"
  bindchange="bindchange" bindtransition="bindtransition" bindanimationfinish="bindanimationfinish" >
  <block wx:for="{{music_img}}" wx:key="key">
    <swiper-item>
    <image src="{{item.src}}" style="width:{{swipterSet.width}}rpx;height:{{swipterSet.height}}rpx;"></image>
    </swiper-item>
  </block>
</swiper>
<view class="searPar">
  <view class="search">
    <input type="text" value="" placeholder-class="pcss" placeholder="输入剧名，演员搜索"  bindinput="inputSear"></input>
  </view>
</view>

<scroll-view style="height:{{v_height}}px;" scroll-y='true'>
  <block wx:for="{{music_list}}" wx:key="key">
      <image src="{{item.img}}" class="img" bindtap="playClick" data-index="{{index}}"></image>
  </block>
</scroll-view>

2,wxss

swipter{
  background: rebeccapurple;
}
.searPar{
  background-color: greenyellow;
  height: 88rpx;
}
.search{
  position: relative;
  border: 1rpx solid #f2f2f2;
  padding:5rpx 15rpx;
  font-size: 28rpx;
  color: #333333;
  border-radius: 10rpx;
  width: 686rpx;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}
.search>input{
  height: 60rpx;
}
.pcss{
  font-size: 28rpx;
}
.img{
  display: inline-block;
  height: 250rpx;
  width: 370rpx;
  margin:5rpx 2.5rpx;
}```
3,视频播放页面wxml

剧名：{{title}}
演员：{{name}}
剧情介绍：{{content}}

4,js

// pages/video/video.js
Page({

/**

页面的初始数据
*/
data: {
videoSet:{
//要播放视频的资源地址支持网络路径、本地临时路径、云文件ID
src: ‘’,
//指定视频时长
duration: 0,
// 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
controls: true,
//弹幕列表 Array.
danmu_list: [],
//是否显示弹幕按钮，只在初始化时有效，不能动态变更
danmu_btn: false,
//是否展示弹幕，只在初始化时有效，不能动态变更
enable_danmu: false,
//是否自动播放
autoplay: true,
//是否循环播放
loop: false,
//是否静音播放
muted: false,
//指定视频初始播放位置
initial_time: ‘0’,
//设置全屏时视频的方向，不指定则根据宽高比自动判断 0 正常竖向 90 屏幕逆时针90度 -90 屏幕顺时针90度
direction: 0,
//若不设置，宽度大于240时才会显示
show_progress: true,
//是否显示全屏按钮
show_fullscreen_btn: true,
//是否显示视频底部控制栏的播放按钮
show_play_btn: true,
//是否显示视频中间的播放按钮
show_center_play_btn: true,
//是否开启控制进度的手势
enable_progress_gesture: true,
//当视频大小与 video 容器大小不一致时，视频的表现形式 contain 包含 fill 填充 cover 覆盖
object_fit: ‘contain’,
//视频封面的图片网络资源地址或云文件ID 若 controls 属性值为 false 则设置 poster 无效
poster: ‘’,
//是否显示静音按钮
show_mute_btn: false,
// 视频的标题，全屏时在顶部展示
title: ‘’,
//播放按钮的位置 bottom controls bar上 center 视频中间
play_btn_position: ‘bottom’,
//是否开启播放手势，即双击切换播放/暂停
enable_play_gesture: false,
//当跳转到本小程序的其他页面时，是否自动暂停本页面的视频播放
auto_pause_if_navigate: true,
//当跳转到其它微信原生页面时，是否自动暂停本页面的视频
auto_pause_if_open_native: true,
//在非全屏模式下，是否开启亮度与音量调节手势
vslide_gesture: false,
//在全屏模式下，是否开启亮度与音量调节手势
vslide_gesture_in_fullscreen: true,
//视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告
ad_unit_id: ‘’,
//用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址
poster_for_crawler: ‘’,
//显示投屏按钮。只安卓且同层渲染下生效，支持 DLNA 协议
show_casting_button: false,
//设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： [“push”, “pop”]）
//push 路由 push 时触发小窗
//pop 路由 pop 时触发小窗
picture_in_picture_mode: ‘’,
// 是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效
enable_auto_rotation: false,
//是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作
show_screen_lock_button: false,
}
},

/**

生命周期函数–监听页面加载
*/
onLoad: function (options) {
console.log(options.content)
var obj = JSON.parse(options.content);

this.setData({
  videoSet: {
    //要播放视频的资源地址 支持网络路径、本地临时路径、云文件ID
    src: obj.music,
    //指定视频时长
    duration: 0,
    //	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
    controls: true,
    //弹幕列表 Array.<object>
    danmu_list: [],
    //是否显示弹幕按钮，只在初始化时有效，不能动态变更
    danmu_btn: false,
    //是否展示弹幕，只在初始化时有效，不能动态变更
    enable_danmu: false,
    //是否自动播放
    autoplay: true,
    //是否循环播放
    loop: false,
    //是否静音播放
    muted: false,
    //指定视频初始播放位置
    initial_time: '0',
    //设置全屏时视频的方向，不指定则根据宽高比自动判断 0	正常竖向	90	屏幕逆时针90度	-90	屏幕顺时针90度	
    direction: 0,
    //若不设置，宽度大于240时才会显示
    show_progress: true,
    //是否显示全屏按钮
    show_fullscreen_btn: true,
    //是否显示视频底部控制栏的播放按钮
    show_play_btn: true,
    //是否显示视频中间的播放按钮
    show_center_play_btn: true,
    //是否开启控制进度的手势
    enable_progress_gesture: true,
    //当视频大小与 video 容器大小不一致时，视频的表现形式 contain	包含	fill	填充	cover	覆盖	
    object_fit: 'contain',
    //视频封面的图片网络资源地址或云文件ID 若 controls 属性值为 false 则设置 poster 无效
    poster: obj.img,
    //是否显示静音按钮
    show_mute_btn: false,
    // 视频的标题，全屏时在顶部展示
    title: '',
    //播放按钮的位置 bottom	controls bar上	center	视频中间	
    play_btn_position: 'bottom',
    //是否开启播放手势，即双击切换播放/暂停
    enable_play_gesture: false,
    //当跳转到本小程序的其他页面时，是否自动暂停本页面的视频播放
    auto_pause_if_navigate: true,
    //当跳转到其它微信原生页面时，是否自动暂停本页面的视频
    auto_pause_if_open_native: true,
    //在非全屏模式下，是否开启亮度与音量调节手势
    vslide_gesture: false,
    //在全屏模式下，是否开启亮度与音量调节手势
    vslide_gesture_in_fullscreen: true,
    //视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告
    ad_unit_id: '',
    //用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址
    poster_for_crawler: '',
    //显示投屏按钮。只安卓且同层渲染下生效，支持 DLNA 协议
    show_casting_button: false,
    //设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]） 
    //push	路由 push 时触发小窗	
    //pop	路由 pop 时触发小窗	
    picture_in_picture_mode: '',
    //	是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效
    enable_auto_rotation: false,
    //是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作
    show_screen_lock_button: false,
  },
  title:obj.title,
  name:obj.name,
  content:obj.content
})

/**

生命周期函数–监听页面初次渲染完成
*/
onReady: function () {

/**

生命周期函数–监听页面显示
*/
onShow: function () {

/**

生命周期函数–监听页面隐藏
*/
onHide: function () {

/**

生命周期函数–监听页面卸载
*/
onUnload: function () {

/**

页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {

/**

页面上拉触底事件的处理函数
*/
onReachBottom: function () {

/**

用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

总结：创造中，视频路径不可使用本地路径，但是可以使用网络连接
源码已留

一只不爱写代码的程序猿

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
微信小程序视频播放器

微信小程序视频播放器1，视频播放器首页 wxml<swiper class="swiper" indicator-dots='{{swipterSet.indicator_dots}}' indicator-color='{{swipterSet.indicator_color}}' indicator-active-color='{{swipterSet.indicator_activ...
复制链接

扫一扫