uni-app分享一个Html5+video 基于mui 5+的视频播放器

uni-app分享一个Html5+video 基于mui 5+的视频播放器

基本信息

运行环境

平台 描述
MUI 5+ 和浏览器或微信

开发环境

平台 版本号 项目创建方式
Android 需要开启硬件加速 manifest.json文件加 “hardwareAccelerated”:true 或者创建文件时加 var webview = plus.webview.create(“url”, “id”,{hardwareAccelerated:true});
iOS 需要开启内联媒体播放 加 “allowsInlineMediaPlayback”: true

播放器功能

  • 手势控制：左边上下滑动控制音量，右边上下滑动控制亮度，左右滑动控制前进后退
  • 支持m3u8格式视频播放
  • 支持点击播放就全屏播放
  • 支持在浏览器和微信上播放视频
  • 支持使用iOS系统自带的播放器
  • 同一页面切换视频方法
  • 新增可以禁止拖动调节音量和亮度，是否显示全屏按钮
  • iOS支持强制全屏播放
  • 修复iOS对.m3u8视频的兼容性

示例代码

"google": {       
   "hardwareAccelerated":true  
}

"plus":{  
    "allowsInlineMediaPlayback": true  
}  

// 初始化插件
var htmlvideo=Html5video("#video_Container",  
{  
 title:"新坦结衣Gakki雪肌精广告", //视频标题，当全屏时会显示  
 url:"2017123101.mp4", //支持本地视频和网络视频，格式MP4  
 img:"img/002.jpg", //视频截图封面  
 time:"02:30", //视频总时间以分钟单位，当网络缓慢时，没办法及时加载出来，如已知可以填写，可不填。  
 autoplay:false, //是否自动播放视频  
 isMobile:false, //是否开启当处于移动网络时，提示用户是否继续播放视频。,不支持浏览器环境  
 isFull:true, //是否点击播放就全屏显示  
 iospay:false, //如果是IOS系统是否采用苹果系统自带播放器, 可以在浏览器或微信中，全屏观看视频  
 drag:true, //禁止拖动,调节,音量和亮度  
 isfull:true, //是否显示全屏按钮  
 prompt:function(video) //当开启isMobile时,这里可以写提示用户的内容,h5+环境才有效  
 {    
               mui.confirm('你当前处于移动手机网络将会消耗手机流量，是否继续播放？', '提示',["取消","确定"], function(e)  
               {  
                    if(e.index == 1)  
                    {  
                      video.play();   
                    }   
              },"div");         
 }  
});   

mui("body").on("tap","#openvideo",function()  
{  
//切换视频播放  
htmlvideo.getplayUrl({url:"  ",img:"  ",title:" "});  
});

更多关于uni-app分享一个Html5+video 基于mui 5+的视频播放器的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app分享一个Html5+video 基于mui 5+的视频播放器的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，结合Html5的<video>标签和mui 5+（即5+ App，DCloud公司提供的HTML5+扩展API）可以实现一个功能丰富的视频播放器。以下是一个简单的示例代码，展示了如何使用这些技术创建一个基本的视频播放器。

1. 创建uni-app项目

首先，确保你已经安装了HBuilderX，这是DCloud官方推荐的IDE，支持uni-app开发。

2. 页面结构（pages/index/index.vue）

<template>
  <view class="container">
    <video
      id="videoPlayer"
      src="https://www.example.com/path/to/your/video.mp4"
      controls
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    ></video>
    <button @click="togglePlayPause">Toggle Play/Pause</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false,
    };
  },
  methods: {
    onPlay() {
      this.isPlaying = true;
      console.log('Video is playing');
    },
    onPause() {
      this.isPlaying = false;
      console.log('Video is paused');
    },
    onEnded() {
      console.log('Video has ended');
    },
    togglePlayPause() {
      const video = document.getElementById('videoPlayer');
      if (this.isPlaying) {
        video.pause();
      } else {
        video.play();
      }
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
video {
  width: 300px;
  height: auto;
  margin-bottom: 20px;
}
</style>

3. 使用mui 5+ API增强功能

虽然上述代码已经提供了一个基本的视频播放器，但mui 5+ API可以进一步增强功能，如全屏播放、系统音量控制等。不过，需要注意的是，mui 5+ API主要通过HTML5+扩展调用，因此在uni-app中直接使用有限。但你可以通过plus.webview、plus.media等API实现更高级的功能。

例如，全屏播放可以通过以下方式实现（注意，这需要在manifest.json中配置5+ App权限）：

methods: {
  fullScreen() {
    const webview = plus.webview.currentWebview();
    webview.setFullscreen(true);
  },
  // ... 其他方法
}

在模板中添加一个按钮来触发全屏：

<button @click="fullScreen">Fullscreen</button>

总结

上述代码展示了如何在uni-app中使用Html5的<video>标签创建一个基本的视频播放器，并结合mui 5+ API（尽管有限）来增强功能。根据具体需求，你可以进一步探索mui 5+的其他API来丰富播放器的功能。

回到顶部