移动端自动播放视频-TS
2021-02-07 本文已影响0人
程序员不务正业
闲来无事-朋友项目帮忙研究 react和vue代码都贴出来了
TS（Transport Stream，传输流）是一种封装的格式，它的全称为MPEG2-TS。是一种视频格式，一般用于实时流媒体和广播电视领域。
Mp4在IOS下可以自动播放，但是在部分安卓机下无法自动播放产生黑屏。 Ts可实现自动播放，IOS8以上和Android4.4以上都支持。 基于自动播放的优势
需要下ffmpeg来将Mp4转化成Ts视频。下面下载操作如下所示： mac下可以运行
// 安装
brew install ffmpeg
// 生成ts视频
ffmpeg -i loop_moon.mp4 -f mpegts \
-codec:v mpeg1video -s 960x540 -b:v 1500k -r 30 -bf 0 \
-codec:a mp2 -ar 44100 -ac 1 -b:a 128k \
loop_moon.ts
还可以控制视频大小（-s），帧速率（-r），视频比特率（-b：v），音频比特率（-b：a），音频通道数（-ac），采样率（-ar ）
// 无损 不过貌似我试了不行
ffmpeg -i high.mp4 -c copy -map 0:v -map 0:a -bsf:a aac_adtstoasc high.ts
推荐使用jsmpeg-player,它是基于jsmpeg封装的npm包
npm install @cycjimmy/jsmpeg-player --save
cnpm install @cycjimmy/jsmpeg-player --save
以下是贴代码
React
import React,{ useEffect, useState, useRef } from 'react';
import JSMpeg from '@cycjimmy/jsmpeg-player';
import './App.css';
function App() {
const cover ='https://img11.360buyimg.com/imagetools/jfs/t1/105707/30/17596/32160/5e8c8ae6Ee2bfd8db/1ef4084de9ec103f.jpg'
const tsSrc='https://storage.360buyimg.com/xingdianzhang/%E6%B5%8B%E8%AF%95ts.ts'
const hdVideo = useRef(null);
var [isCover, setIsCover] = useState(true);//是否用封面覆盖
useEffect(() => {
initTs()
}, [])
function initTs() {
let canvas = hdVideo.current.querySelector('.hdVideo-ts');
canvas.style.width = '0px'
new JSMpeg.VideoElement(canvas, tsSrc, {
canvas,
autoplay: true,
loop: true,
progressive: false,//是否为chunk
control: false,
poster: cover,
preserveDrawingBuffer: true,
decodeFirstFrame: true,
disableGl: true,
}, {
audio: false, //静音
onPlay: () => {
canvas.style.width = hdVideo.current.clientWidth + 'px'
setIsCover(false)
}
})
}
return (
<div ref={hdVideo} className='hdVideo'>
{isCover ? <img className="hdVideo-image" src={cover} /> : null}
<canvas className="hdVideo-ts"></canvas>
</div>
);
}
export default App;
VUE
<template>
<body>
<div>
<div class="homepage-hero-module">
<div class="video-wrap">
<div class="filter" :style="fixStyle ">
</div>
<canvas id="videoWrapper" class="fillWidth"></canvas>
<div class="poster">
<span class="h1s">Welcome</span>
</div>
</div>
</div>
</div>
</body>
</template>
<script>
import JSMpeg from '@cycjimmy/jsmpeg-player';
export default {
data() {
return {
}
},
mounted: function () {
var tsSrc = 'https://storage.360buyimg.com/xingdianzhang/%E6%B5%8B%E8%AF%95ts.ts'
var cover =
'https://img11.360buyimg.com/imagetools/jfs/t1/105707/30/17596/32160/5e8c8ae6Ee2bfd8db/1ef4084de9ec103f.jpg'
let canvas = document.getElementById('videoWrapper')
new JSMpeg.VideoElement(canvas, tsSrc, {
canvas,
autoplay: true,
loop: true,
progressive: false, //是否为chunk
control: false,
poster: cover,
preserveDrawingBuffer: true,
decodeFirstFrame: true,
disableGl: true,
}, {
audio: false, //静音
onPlay: () => {
console.log("---1111")
}
})
},
}
</script>
<style scoped>
.video {
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
.homepage-hero-module,
.video-container {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 0;
}
.video-wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
opacity: 1;
overflow: hidden;
}
.video-container .poster img,
.video-container video {
z-index: 0;
position: absolute;
}
.filter {
z-index: 1;
position: absolute;
background: rgba(110, 110, 110, 0);
}
.video-container .filter {
z-index: 1;
position: absolute;
background: rgba(0, 0, 0, 0.4);
}
.h1s {
font-size: 32px;
margin-top: 50%;
margin-bottom: 48px;
font-weight: 300;
color: #FFF;
position: absolute;
height: 100%;
justify-content: center;
z-index: 50;
align-items: center;
font-family: "Arial";
margin-block-start: 25%;
margin-block-end: 45%;
margin-inline-start: 35%;
margin-inline-end: 50%;
font-size: 80px;
}
.video-js .vjs-icon-placeholder {
width: 100%;
height: 100%;
display: block;
}
</style>
