2015-05-17 7 views
5

मैं अपने स्थानीय वेबकैम से लाइव सामग्री स्ट्रीम करने के लिए Video.js प्लेयर का उपयोग कर रहा हूं (लेकिन मुझे लगता है कि उस मामले में कोई फर्क नहीं पड़ता है, यह वेब से कोई लाइव स्ट्रीम हो सकता है)। मैं एक बहुत ही सरल कोड लिखा है:वीडियो.जेएस केवल ऑटोप्ले सेट के साथ सत्य पर दिखाता है। क्या मैं इसे प्ले बटन पर क्लिक करने के बाद काम कर सकता हूं?

<head> 
    <link href="video-js.css" rel="stylesheet"> 
    <script src="http://www.andy-howard.com/js/libs/jquery-1.8.2.min.js"></script> 
    <script src="http://vjs.zencdn.net/c/video.js"></script> 
     <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> 
    </style> 
</head> 
<body> 
    <video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls" 
     preload="auto" data-setup='{}' autoplay="true" > 
     <source src="http://10.172.180.31:8090/live.flv" type="video/x-flv"> 
    </video> 
</body> 

और अब है कि विन्यास मैं धारा सामग्री को देखने में, लेकिन वहाँ जोड़ी त्रुटियाँ हैं:

1) मैं नियंत्रण दिखाई नहीं देते (धारा को रोकने के लिए)

2) स्ट्रीम this जैसा दिखता है, इसलिए वीडियो को घटक के पूर्ण आकार में आकार में नहीं बदला गया है। लेकिन (और यह वास्तव में दिलचस्प है) जब मैं वेबपृष्ठ पर तत्वों का आकार बदलता हूं (उदाहरण के लिए क्रोम में नियंत्रण और माउस व्हील स्क्रॉल करके) 110% तक, तो वीडियो पूरे घटक को भरता है। वीडियो.जेएस में एक बग की तरह लगता है या शायद मेरा कार्यान्वयन गलत है?

3) जब मैं autoplay="true" पैरामीटर को हटाता हूं - कुछ भी नहीं दिखाता है, नियंत्रण और वीडियो चला जाता है और इसे खेलना असंभव है।

4) मैं autoplay="true" को हटाना चाहता था, लेकिन poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" सहित पोस्टर जानकारी जोड़ना - कुछ भी नहीं बदला है, स्ट्रीम दिखाई नहीं दे रहा है, नियंत्रण वहां नहीं हैं।

5) जब मैं data-setup पैरामीटर को निकालने और इस तरह इसे छोड़: <video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls" preload="auto" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" > तो नियंत्रण और पोस्टर दिखाई (जो महान है), लेकिन प्ले बटन धूसर हो जाता है और यह मेरी धारा खेलने के लिए असंभव है।

मैं प्रभाव है कि वेब पेज लोड करने के बाद मैं प्ले बटन के साथ पोस्टर छवि देख सकते हैं, और जब मैं इसे क्लिक हासिल करना चाहते हैं - मैं ठीक से आकार दिया धारा देखेंगे। मैं क्या खो रहा हूँ? धन्यवाद!

उत्तर

0

सबसे पहले, Video.js के नवीनतम रिलीज, आप 3.2 संस्करण का उपयोग कर रहे हैं का उपयोग करने के दूसरे,, कोशिश ...

<link href="http://vjs.zencdn.net/4.12.6/video-js.css" rel="stylesheet"> 
<script src="http://vjs.zencdn.net/4.12.6/video.js"></script> 

आप VideoJS के साथ एक लाइव (धारा) का उपयोग करने की कोशिश कर रहे हैं आप देखना चाहिए कि कैसे VideoJS धारा सूत्रों पढ़ता है: https://github.com/videojs/video.js/blob/master/docs/guides/tech.md#enabling-streaming-playback

ध्यान दें कि स्ट्रीमिंग यूआरएल एक विशिष्ट पैटर्न की आवश्यकता है:

{protocol}://{your.streaming.provider.net/cfx/st}/{format}:{videoURL}.{format} 

FLV एक वीडियो कंटेनर, नहीं एक प्रोटोकॉल, वाई है कहां एक स्ट्रीम प्रोटोकॉल जैसे आरटीएमपी (फ्लैश), एचडीएस (फ्लैश), एमपीईजी/डैश या एचएलएस (ऐप्पल) का उपयोग करना चाहिए।

सादर,

1

बिना controls

यह कोशिश करो मेरे लिए काम करता है:

<video id="se_videojs" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" height="auto" width="auto" data-setup="{}"> 
<source src="http://server/playlist.m3u8" type="application/x-mpegurl"> 
</video> 
संबंधित मुद्दे

 संबंधित मुद्दे