整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
能是出于節(jié)省用戶流量，許多移動(dòng)端瀏覽器都不支持H5自動(dòng)播放視頻，必須在用戶主動(dòng)交互（點(diǎn)擊或者滑動(dòng)等）后才可以通過js播放視頻
PC端可以通過設(shè)置muted，自動(dòng)播放靜音視頻
安卓瀏覽器均不支持自動(dòng)播放，實(shí)測(cè)在微信內(nèi)置瀏覽器，滑動(dòng)視為交互行為，可以在這之后播放視頻，抖音內(nèi)置瀏覽器則需要點(diǎn)擊交互，鴻蒙系統(tǒng)瀏覽器可以自動(dòng)播放靜音視頻
進(jìn)入網(wǎng)站時(shí)彈窗，例如歡迎語等，用戶點(diǎn)擊關(guān)閉后執(zhí)行視頻播放
簡(jiǎn)單粗暴的方法，在某些場(chǎng)景時(shí)適用的，實(shí)測(cè)在安卓、鴻蒙、IOS、抖音瀏覽器等均可以用這個(gè)方法解決
close() {
const videos = document.querySelectorAll('video');
for (let i = 0; i < videos.length; i++) {
const element = videos[i];
element.play();
}
}
【更多音視頻學(xué)習(xí)資料，點(diǎn)擊下方鏈接免費(fèi)領(lǐng)取↓↓，先碼住不迷路~】
點(diǎn)擊領(lǐng)取→音視頻開發(fā)基礎(chǔ)知識(shí)和資料包
將視頻轉(zhuǎn)成ts格式，通過jsmpeg解碼器進(jìn)行加載播放，可以實(shí)現(xiàn)自動(dòng)播放，實(shí)測(cè)基本上可以解決所有移動(dòng)端無法播放視頻的問題
轉(zhuǎn)ts
安裝ffmpeg，輸入命令將mp4轉(zhuǎn)成ts
ffmpeg.exe -i in.mp4 -f mpegts -codec:v mpeg1video -s 680x1080 -b:v 2074k -r 29.97 out.ts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
// 引入jsmpeg
<script src="./jsmpeg.min.js"></script>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" height="750" width="750"></canvas>
<script>
var canvas = document.querySelector("#canvas");
// 加載ts文件
var player = new JSMpeg.Player("./out.ts", {
canvas: canvas,
loop: true, // 循環(huán)播放
autoplay: true, // 自動(dòng)播放
audio: false, // 禁用音頻
});
player.play();
</script>
</body>
</html>
<video webkit-playsinline="webkit-playsinline" playsinline></video>如果你對(duì)音視頻開發(fā)感興趣，覺得文章對(duì)您有幫助，別忘了點(diǎn)贊、收藏哦！或者對(duì)本文的一些闡述有自己的看法，有任何問題，歡迎在下方評(píng)論區(qū)討論！
頻是網(wǎng)頁(yè)承載內(nèi)容很重要的一個(gè)元素，也是必不可少的網(wǎng)頁(yè)表現(xiàn)形式（圖、文、表、視、音）之一。曾經(jīng)網(wǎng)頁(yè)要想播放視頻、制作游戲，必須得用第三方插件flash。不僅編寫代碼要使用額外的語言，瀏覽器也必須得裝第三方插件，非常不方便。隨著html5標(biāo)準(zhǔn)逐漸普及，移動(dòng)端、pc端開始拋棄flash，如今幾乎所有的瀏覽器都使用html5來制作視頻。
目標(biāo)
flash是Adobe公司其中之一的產(chǎn)品。它發(fā)起于W3C與WHATWG的第五代web標(biāo)準(zhǔn)之爭(zhēng)，它撿了個(gè)大便宜，乘機(jī)定義網(wǎng)頁(yè)媒體標(biāo)準(zhǔn)。
W3C與WHATWG的第五代web標(biāo)準(zhǔn)之爭(zhēng)
flash填補(bǔ)了當(dāng)時(shí)網(wǎng)頁(yè)只有文字和圖片的單調(diào)世界，將媒體（視頻、音頻、游戲）引入了網(wǎng)頁(yè)，將網(wǎng)頁(yè)帶進(jìn)多彩的世界。
Flash能夠用僅僅十幾K到幾百K的體積，呈現(xiàn)出放大也不會(huì)失真的矢量彩色動(dòng)圖，甚至還能夠做出足以令人沉迷一整天的Flash小游戲。
火柴人
Flash用第三方插件的身份，幾乎制霸了網(wǎng)頁(yè)媒體的標(biāo)準(zhǔn)，讓W(xué)3C尷尬不已，甚至從某種程度上說，讓真正的網(wǎng)頁(yè)標(biāo)準(zhǔn)推廣受阻。
2010年4月，蘋果CEO公開表示從此蘋果所有產(chǎn)品不再支持flash。flash從此慢慢喪失移動(dòng)端的市場(chǎng)和地位。
喬布斯支持html5
2012年，安卓宣布不再支持Flash，從此flash徹底失去了移動(dòng)端市場(chǎng)和地位。
2012年html5標(biāo)準(zhǔn)確立，html5在逐漸制霸移動(dòng)端的地位時(shí)，也直接沖擊了flash僅剩的桌面市場(chǎng)，flash桌面市場(chǎng)的份額在逐步下降。
各大瀏覽器逐步默認(rèn)禁用Flash，現(xiàn)2019年幾乎都全部禁用。
默認(rèn)禁用Flash
Adobe將在2020年停止開發(fā)和更新flash。
2020年停止開發(fā)和更新flash
Flash以第三方插件的身份，做著平臺(tái)該做的事情，但沒有推動(dòng)行業(yè)標(biāo)準(zhǔn)統(tǒng)一化，反而企圖私立標(biāo)準(zhǔn)。
隨著功能的增多，能解碼編碼H.264，能進(jìn)行3D渲染，能播放7.1聲道環(huán)繞聲等，功能集于一身變得臃腫，效率變得低下。
Flash非常不安全。Flash能夠運(yùn)行相當(dāng)復(fù)雜的代碼，這讓Flash非常容易被滲透。加上Adobe在安全方面的不上心，這令Flash安全問題頻發(fā)。
Flash很不穩(wěn)定。作為一個(gè)插件，它自身頻頻崩潰也就罷了，還經(jīng)常拉著瀏覽器乃至操作系統(tǒng)一起殉情。
Flash加劇了手機(jī)的耗電量。
作用是在 HTML 頁(yè)面中嵌入視頻元素。Video定義視頻，比如電影片段或其他視頻流。
視頻播放
有四個(gè)是必須的屬性：src、controls、width、height屬性。
視頻播放代碼
<video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。
<source> 元素可以鏈接不同格式的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式。
支持多格式的視頻
video標(biāo)簽體系
昨天發(fā)布Edge Dev重大版本更新之后，在今天發(fā)布的Edge Canary通道版本中還帶來了全新的主題設(shè)置，以及阻止多媒體自動(dòng)播放的實(shí)驗(yàn)Flag。目前基于Chromium的Edge瀏覽器支持來自Microsoft Store和Google Chrome Web Store的擴(kuò)展程序，在今天的版本更新中可以按照商城不同來分類。
在最新的Edge Canary通道版本，在閱讀視圖下用戶可以將網(wǎng)頁(yè)保存至MHTML文件，此外還可以在PDF文件中查看DRM內(nèi)容。在新增的主題設(shè)置中允許用戶不跟隨系統(tǒng)設(shè)置，手動(dòng)選擇Light或者Dark主題。用戶可以在Menu > Settings > Appearance and Theme選項(xiàng)下進(jìn)行調(diào)整。
最新Edge Canary通道版本還帶來了實(shí)現(xiàn)性的Flag--Limit media autoplay，能夠阻止部分網(wǎng)站的視頻自動(dòng)播放。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
