1. 程式人生 > >video.js播放rtmp

video.js播放rtmp

這段時間做一個web端視訊實時監控功能,特此記錄一下:

h5新標籤vedio不支援rtmp流,需要flash來播放,而谷歌瀏覽器如果沒啟用flash是無法播放的,所以檢測一下在頁面給一個提示,方便使用者。為了相容不同瀏覽器,IE只支援對Object的解析;火狐,谷歌,Safari只支援對Embed的解析。我這裡只是借用了embed的樣式和提示啟用flash的功能。

<script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
<link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
<div class="openFlashTips" style="width:300px;position:absolute;top:20px;left:225px;z-Index:9999;color:white">視訊無法正常播放,請點選下方啟用flash</div>
<video id="my-video" style="color:black;width:750px;height:350px" class="video-js" autoplay controls preload="auto" width="750" height="350" data-setup="{}">
    <source src="rtmp://xx.xxx.xxx.xx:xxxxx/myweb" type="rtmp/flv">//在這裡改url
</video>
<embed width="300" height="70" class="openFlash" style="position:absolute;top:130px;left:225px;z-Index:9999;" type="application/x-shockwave-flash">
<script type="text/javascript" language="JavaScript">
    function flashChecker() {
        var hasFlash = 0;         //是否安裝了flash
        var flashVersion = 0; //flash版本
        var isIE = /*@
[email protected]
*/0; //是否IE瀏覽器 if (isIE) { var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if (swf) { hasFlash = 1; VSwf = swf.GetVariable("$version"); flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]); } } else { if (navigator.plugins && navigator.plugins.length > 0) { var swf = navigator.plugins["Shockwave Flash"]; if (swf) { hasFlash = 1; var words = swf.description.split(" "); for (var i = 0; i < words.length; ++i) { if (isNaN(parseInt(words[i]))) continue; flashVersion = parseInt(words[i]); } } } } return {f: hasFlash, v: flashVersion}; } var fls = flashChecker(); var s = ""; if (fls.f) { document.getElementsByClassName("openFlash")[0].style.display = "none"; document.getElementsByClassName("openFlashTips")[0].style.display = "none"; // document.write("您安裝了flash,當前flash版本為: " + fls.v + ".x"); } else { document.getElementsByClassName("openFlash")[0].style.display = "block"; document.getElementsByClassName("openFlashTips")[0].style.display = "block"; // document.write("您沒有安裝flash"); } </script>

相關推薦

video.js播放rtmp直播源和hls直播源

看了很多網上的坑,都是無法播放的,這次自己親測能播放 注意如果是自己製作的源的話,在推流之後要先等一小會才可以播放 video.js播放rtmp源 一定要注意你的Chrome瀏覽器允許播放flash,因為rtmp是基於flash的,設定可以從百度查詢如何設定chrome瀏覽器

Video.js 播放rtmp視訊流

使用video.js播放rtmp視訊流 <html> <head> <title>視訊直播</title> <meta charse

video.js播放rtmp

這段時間做一個web端視訊實時監控功能,特此記錄一下: h5新標籤vedio不支援rtmp流,需要flash來播放,而谷歌瀏覽器如果沒啟用flash是無法播放的,所以檢測一下在頁面給一個提示,方便使用者。為了相容不同瀏覽器,IE只支援對Object的解析;火狐,谷歌,Saf

使用video.js播放rtmp視訊流

轉載地址:https://blog.csdn.net/u013654125/article/details/78813501 參考:https://www.cnblogs.com/ShaYeBlog/p/7068188.html 在h5頁面裡播放rtmp流,需要一個viode.js庫的支援。

video.js+swiper 視訊播放結束後三秒播放下一個,點選播放視訊

代嗎 <!DOCTYPE html> <html>   <head> <meta charset="UTF-8"> <title></title> <link rel="stylesh

video.js 一個頁面同時播放多個視頻

control clas cti pre img ont fault source big $(data).each(function(i, item) { // innerHTML += ‘<li type-id="‘+item.id+‘"

video.js 一個頁面同時播放多個視訊

$(data).each(function(i, item) { // innerHTML += '<li type-id="'+item.id+'">'+ // '<img src="'+(item.imgs?

外掛用法--視訊播放video.js

1、video.js 這篇裡面全部覆蓋,總結得真好。 https://www.awaimai.com/2053.html   大坑--安卓手機上video層級最高,在播放視訊後video尷尬地在頁面所有元素之上,設定z-index也沒有用,這個時候,可以設定video的屬性: x5-pla

video.js和windows自帶播放外掛MediaPlayer實現視訊播放

由於本人在搜尋資料沒有找到video.js外掛支援ie8的方法,所以在做檢視視訊的功能時想法是這樣的,對於谷歌和IE10以上用video.js的方法實現,而IE9及IE8用MediaPlayer實現。下面是實現程式碼(只測試過mp4格式的): 1.video.js實現 &

JS監聽video視訊播放時間

採用原生時間監聽element.addEventListener(event, function, useCapture) //監聽播放時間 var video = document.getElementById(videoName

video.js 移動端視訊播放器外掛心得

  專案開發遇到視訊播放,考慮到不同移動端需要統一風格,所以選擇用視訊播放外掛。看了試了好多外掛,發現video.js用量最多(必有其好處),用法也很便捷。video.js jquery外掛庫,可直接下載不需要積分;api也有;    但是在移動端的相容不是很好。    問題

基於video.js 的線上播放功能

  因為在此次專案中需要實現線上播放視訊的效果. 所以上網百度了一下相關的外掛, 最後決定選用基於html5的video.js外掛來實現. video.js也是開源免費的,下載十分方便.     下

使用Video.js打造網頁播放

1.第一步 <link href="video-js.css" rel="stylesheet" type="text/css"> <!-- video.js must be

H5視訊播放video.js介紹

原文地址:http://www.mamicode.com/info-detail-1503980.html 看下預設例子: <head> <title>Video.js | HTML5 Video Player</titl

js控制video播放和暫停

  var videoEl = document.querySelector('video')              videoEl.addEventListener('play', function () {                  var vTime =

video.js--很讚的H5視訊播放

<head> <title>Video.js | HTML5 Video Player</title> <link href="http://vjs.zencdn.net/5.0.2/video-js.css" re

vue使用video.js解決m3u8視訊播放格式

今天被這個關於m3u8視訊播放不了搞了一下午,這個專案所有的視訊流都是m3u8格式的,後臺給我們返回的都是m3u8格式的視訊流,解決了好長時間,看了好多部落格,只有這個部落格給我點啟發,去解決這個問題,請檢視。會使用兩種方法來解決這個問題 第一種方法 1.在vue中安裝下面這些外掛 cn

ffmpeg:mp4轉m3u8並用video.js在web頁面播放

一,ffmpeg的安裝:       參見: https://www.cnblogs.com/architectforest/p/12807683.html 說明:劉巨集締的架構森林是一個專注架構的部落格,地址:https://www.cnblogs.com/architec

videojs集成--播放rtmp

oot des head enter max size copyto meta 進行 之前說到已經把流推送過來了,這時候就可以使用videojs來進行顯示播放。 首先要先有一個文件,那就是video-js.swf 因為,這種播放方式html已經不能很好的進行播放了

video.js使用

默認 color auto chap edi lin res control display <!-- x5-playsinline="" playsinline="" webkit-playsinline=""加上可以解決微信瀏覽器默認最大化顯示的問題-->