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=""加上可以解決微信瀏覽器默認最大化顯示的問題-->