background
Recently, the product video playback function of the mobile terminal is being developed. In the local development environment, it can be played normally when opened in the browser of the PC terminal, but in the online test environment, the video cannot be played, no matter whether it is the PC terminal or the mobile terminal.
The code at the beginning of the period is simply using video标签+ source标签to realize the playback function. The code is as shown in the figure:
the loaded video file is a blob file stream video, as shown in the figure:
Scenes
- Local development environment + PC browser = normal playback
- Local development environment + mobile QQ browser = playback failed
- Local development environment + mobile WeChat browser = normal playback
- Online test environment + PC browser = playback failed
- Online test environment + mobile QQ browser = playback failed
- Online test environment + mobile WeChat browser = playback failed
solve
Playback failure caused by autoplay
After removing the autoplay attribute in the video tag, the local development environment + mobile QQ browser can play normally. But after updating the code to the online test environment, the playback still fails.
nginx supports blob media files
After modifying the configuration in nginx and adding media-src * blobthe configuration , the online test environment can also play normally.
Autoplay is also supported without autoplay
Use instead vue3videoPlay(the mobile project uses vue3 + vite, so this plugin is used, and it also has a vue2 version plugin)
Install
yarn add vue3-video-play
introduce
import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
// 获取视频配置
const getVideoOptions = (obj) => {
return {
width: '100%',
src: obj.realVideoUrl,
autoPlay: true, //自动播放
}
}