整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者丨Benedict Evans （著名移動分析師，A16Z合伙人）
編譯丨IT桔子 一笑
下面這張圖表是 Jonah Peretti 去年年底發布的。這張關于內容模式和分發的圖片有趣的地方在于它反映出了兩個明顯的趨勢：分發平臺的擴增以及內容模式的擴增。
圖中的每一段都是不同的用戶獲取模式，同時也是不同內容格式的平臺。進行瀏覽的方式、內容類型以及潛在的內容類型都是不同的。
在這種擴增中，分發模型有兩個發展方向：
算法驅動的信息流（Facebook、Twitter、Instagram）
人工策劃（SnapchatDiscover通過編輯和藝術家團隊策劃內容）
而內容模型：
一方面格式變得越來越豐富和沉浸式（往往是通過視頻的形式）
另一方面更輕量的、基于文本的格式也越來越流行（AMP、Facebook Instant Articles）
盡管 AMP 和 Articles 強調的是加載速度，但就像Facebook 或 Snapchat 上的視頻，內容也是受控于平臺方。
與此同時，Google 做 AMP、Facebook 做 Instant Articles 的一部分目的在于，通過去除所有的廣告技術以及分析所用的 JavaScript ，轉而使用 Google 和 Facebook 自己的解決方案，以節省寬帶、提高渲染速度。但另一端的帶寬規模卻在增長，Snapchat Discover 讓平臺告訴你發生了什么。大多數情況下，尤其是 Facebook 和 Snapchat ，平臺方可以比只依靠JavaScript提供更好的用戶使用和用戶的信息（理論上也會帶來更好的經濟效益）。此外，你獲得的不僅是新內容和指標，還有新的廣告格式，Snapchat 是個典型的例子，和網頁條幅廣告相比，這種廣告形式讓人感覺更加原生，與普通內容自然地融為一體。
也就是說，這些模型改變了你獲取受眾的方式，改變了受眾看到的內容，改變了你對受眾的了解，以及你如何從中賺錢的方式（大約 1/3 的移動網頁瀏覽發生在Facebook應用內）。
Facebook 有 Instant Articles，現在Google 也有了InstantApps。你點擊鏈接，“原生”（不會是 HTML）代碼立即就會出現并運行。你可以把這看作是 Java 的回歸（從某種意義上來說 Android 就是 Java），或者 Flash 的回歸，我認為 Flash 的應用也很廣泛。Snapchat Discover 看起來就像是 Flash，雖然在技術上來說是 h264 視頻，但實際的內容卻非常像10年前的Flash：豐富、互動、活動的內容混合聲音、動作、動畫，有時候還包括真正的實景畫面。從前我們用 Flash 交付視頻，現在我們用視頻交付 Flash。也就是說，視頻就是新的 HTML：一種新的內容交付格式。Instant Apps 做的事情一樣，只不過借助的是 Android 而不是 Snapchat 。另外雖然 Google IO大會上 Instant Apps 的演示看起來更像是 app 而不是內容，但其中的原理是一樣的，比 HTML 更豐富，但又不用通過應用商店。 AMP 或 Instant Stories 也足夠證明我們現在已經從舊的、簡單的 HTML 和 JavaScript 轉到擁抱更好的體驗了。
有人可能也會認為這意味著視頻（包括 GIF 等格式）充當著一種新的載體：一種把各類內容封裝起來的手段，使之可以在互聯網上流通和分享。把GIF或視頻嵌入到社交網絡信息流中，成為替代 HTML 的內容交付格式，你可以嵌入任何想要的內容，包括廣告。
這同時指向了指標的擴增。當 Snapchat 聲稱擁有“每日100 億的視頻瀏覽量”時，具體含義是什么？別人可以拿什么指標來做比較？如何看待自動播放的視頻瀏覽量？如果用戶靜音或者沒有聲音呢？你肯定不能和看電視的情況作比較，只能基于跟 Facebook 或其他任何內容相同的基礎上比較總時長。YouTube 至少在形式上跟電視是一樣的，但 Snapchat 卻不是。而且設計和報告指標的也是平臺方自己。
把這個問題延伸一下，如果不能比較觀看時間，也就很難比較廣告支出。在大部分初始狀態為靜音、經常被跳過的“視頻” 平臺上的觀看時間能和電視熱播節目上的觀看時間相比嗎？電視上播放著節目但是你卻坐在沙發上看智能手機上互動性很強的富媒體內容的時間又怎么算？再想的超前一點，是不是還得考慮一下 VR 上的廣告價值與互動性？
反過來看，這又讓我覺得移動廣告的攔截會變得更有問題。Facebook 在很長一段時間以來都是全世界最大的廣告攔截者，它也是世界上最大的移動網頁瀏覽器之一。但如果平臺從單個 IP 向我發送加密的數據，比如一段 h264 視頻流，里面正好又有一段廣告，內容渲染用的又是私有設備進行，這種廣告又怎么剔除呢？對廣告攔截的最大影響也許就是把內容所有者放到離一個開放的web越來越遠的地方。
關于移動端我的一個思考框架是我們正在尋找下一個 Runtime（指一個程序在運行的狀態），一個繼 web 和移動app 之后、在移動端創造體驗的地方，這個新的Runtime也許會帶來新的互動（engagement）和探索模式，也可能誕生全新的盈利模式。這顯然是審視 GoogleAI助手 或者 Facebook 聊天機器人平臺的一種很好的方式，這種審視代碼的方式一樣用來審視內容也是一樣的：Snapchat 和微信一樣也是個開發平臺，你只需要從恰當的角度觀察。屏幕本身就是Runtime，越豐富、越原生就越好。
— END —
象一下，你正在為你的朋友舉辦一個生日聚會，他非常喜歡音樂視頻。你想要給他一個特別的驚喜：在聚會期間播放一個由他最喜歡的音樂視頻組成的串燒。為了讓這個視覺體驗更加完美，你需要確保在視頻之間進行平滑切換，避免任何尷尬的停頓。幸運的是，你有一些 HTML 和 JavaScript 的基礎知識，所以你決定用這些技能來制作一個自定義的視頻播放器，實現無縫切換。
在本文中，我們將展示如何使用 JavaScript 和 HTML5 的 <video> 標簽在不同視頻之間實現平滑過渡，讓你可以為你的朋友創造一個令人難忘的音樂視頻串燒。
要實現視頻播放中斷切換并順利過渡，可以使用 JavaScript 以及 HTML5 的 <video> 標簽來實現。以下是一個基本的示例，展示了如何在兩個視頻之間平滑切換。
<!DOCTYPE html>
<html>
<head>
<style>
#videoContainer {
position: relative;
}
video {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="videoContainer">
<br>
<button onclick="myFunction()" style="width: 80px;height: 30px;">Click me</button>
<br>
<video id="video2" width="640" height="360" preload="auto">
<source src="video2.mp4" type="video/mp4" />
</video>
<video id="video1" width="640" height="360" preload="auto">
<source src="video1.mp4" type="video/mp4" />
</video>
</div>
<script src="script.js"></script>
</body>
</html>
const video1 = document.getElementById('video1');
const video2 = document.getElementById('video2');
// 當第一個視頻播放完畢時觸發
video1.onended = () => {
// 隱藏第一個視頻
video1.style.opacity = 0;
video2.style.opacity = 1;
// 開始播放第二個視頻
video2.play();
};
function myFunction() {
// ：播放第一個視頻
video1.play();
}
在此示例中，當第一個視頻播放完畢時，我們將其隱藏并開始播放第二個視頻。這樣可以實現在兩個視頻之間平滑切換。請注意，此示例僅在視頻結束時切換，如果需要在特定時間點或根據其他條件進行切換，可以修改代碼以適應需求。
如果你希望在視頻切換時有更絲滑的過渡效果，可以嘗試使用 CSS 動畫。例如，在 JavaScript 中添加以下代碼：
// 定義一個用于執行過渡動畫的函數
function fadeTransition(videoOut, videoIn, duration) {
videoOut.style.transition = `opacity ${duration}ms`;
videoOut.style.opacity = 0;
videoIn.style.opacity = 1;
videoIn.play();
setTimeout(() => {
videoOut.style.display = 'none';
videoOut.style.opacity = 1;
videoOut.style.transition = '';
}, duration);
}
// 修改 onended 事件處理程序
video1.onended = () => {
fadeTransition(video1, video2, 500);
};
這段代碼定義了一個 fadeTransition 函數，該函數會漸隱當前播放的視頻并播放下一個視頻。在這個例子中，我們在第一個視頻結束時調用該函數，實現了兩個視頻之間的平滑過渡。
但是實際操作中，似乎沒有動畫的時候，感覺反而更流暢，這個就需要反復調試測試了。
使用 webrtc 協議做直播，常見的音視頻源是攝像頭和麥克風，高級一點的就是桌面分享。雖然使用桌面分享可以實現推送本地流（原理就是對屏幕錄制），但依賴本地播放器，并且觀眾可以看到主播的任何操作。
有一種偽直播需求，需要將本地視頻無感知推送給用戶，讓用戶感覺就像直播一樣。
使用webrtc協議，大多數情況是在瀏覽器中做主播端。眾所周知，出于安全和隱私的原因，Web 應用程序不能直接訪問用戶設備上的文件。那么如何將本地視頻源進行加載到瀏覽器并推送出去呢？
HTMLCanvasElement.captureStream()
該方法返回一個CanvasCaptureMediaStream實時視頻捕獲的畫布。
使用例子：
//獲取所需要截取媒體流的canvas element
var canvasElt = document.querySelector('canvas'); // 或者 video 標簽
//截取到媒體流
var stream = canvasElt.captureStream(25); // 25 FPS
//使用媒體流
// E.g.使用RTCPeerConnection來傳輸給其它的電腦
// 下面的pc是其他地方創建的一個RTCPeerConnection
pc.addStream(stream);
通過以上例子，是不是恍然大霧。
此時我們的方案可以是：
此時解決了推送視頻流，但是要推送本地視頻怎么做呢？
相關學習資料推薦，點擊下方鏈接免費報名，先碼住不迷路~】
音視頻免費學習地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級開發
【免費分享】音視頻學習資料包、大廠面試題、技術視頻和學習路線圖，資料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點擊788280672加群免費領取~
出于安全和隱私的原因，Web 應用程序不能直接訪問用戶設備上的文件。如果需要讀取一個或多個本地文件，可以通過使用 input file 和 FileReader 來實現。雖然 FileReader 可以讀文件，但是需要經過base-64編碼，如果讀大文件肯定會影響效率。所以我們只能考慮 input file， 可以使用 URL.createObjectURL 對視頻進行預覽。
那么我的最終方案就是使用 captureStream + input file預覽 模式來解決這個問題。
簡要代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video width="500" controls>
<source src="my_video.mp4" id="video_here">
</video>
<input type="file" name="file[]" class="file_video" accept="video/*">
<script>
$(document).on("change", ".file_video", function (evt) {
var $source = $('#video_here');
$source[0].src = URL.createObjectURL(this.files[0]);
$source.parent()[0].load();
})
</script>
</body>
</html>
通過以上步驟，我們可以總結如下步驟：
原文 https://zhuanlan.zhihu.com/p/291399800
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
