1. The design idea of h5 player
These functions should be included after reconstruction: support for on-demand (non-encrypted MP4) and live broadcast (m3u8), compatible (adapted) to mobile terminals, and automatically select (use flash or h5) according to the platform.
In terms of frameworks and libraries, we still choose to mainly use nej framework, nej provides a wealth of methods. The classes that are exposed to the outside world are implemented using regular, because most of the front-end components and business projects of education products use regular, which is very convenient to use. In addition, the flexible solution is selected on the mobile terminal, because the web page adaptation of education products has been unified using flexible, and the handling of gesture events is selected.
In order to facilitate the expansion and addition of components, the observer mode is used. The observer mode is very suitable for use in a project of the size of a video player, and it is also a design mode that has been tried and tested. I directly referred to the similar implementation in flex, and wrote it again using js (of course, I wrote it very quickly).
As shown in the figure above, the component base class and the componentContainer singleton class implement the observer pattern. All components are inherited from the component class. In the component instance, methods can be called to send notification objects for communication between components. The notification scheduling is in the componentContainer. Achieved. These components are divided into required components and optional components. The necessary components include: video object component (movieData), video playback component (mainVideo), api component, etc. The optional components are developed according to the business requirements of different products, which can be developed through The configuration of different component lists customizes the specific functions of the player, which is also implemented in componentContainer. Html5VideoMedia is an encapsulation of HTMLVideoElement. It is not used as a component, but only provides video playback functions and defines related events. In addition to video playback components, Html5VideoMedia can also be an introductory advertising component.
In terms of adaptation, the flexible scheme is used for style adaptation. Some components are more complex, such as the control bar. The web and mobile functions are very different, and the styles are also very different. You can consider using different components on different platforms (control and controlMobile can be seen in the figure), and the logic will be very clear. , Do not need to write a lot of if and else, but because it depends on more components, the js and css files will be larger. I personally feel that in order to improve the maintainability of the code, it is advisable to sacrifice part of the file size.
,
2. Some features of hls live broadcast
Judgment of live broadcast status. In fact, the live broadcast function is closely related to the business. The live broadcast status here is also the status of the business only, such as: not started, about to start, live broadcast, live broadcast ended, etc. Our products still use front-end polling to update the status of the live broadcast. One thing to mention is that the hls stream will not trigger the end event, so the status of the h5 live broadcast is actually controlled entirely by polling.
How to determine the flow is abnormal. For general network problems or source problems, you can monitor the error events of the video tag and the source tag. Both tags need to be monitored. But the error message when the error is triggered is sometimes not information, or different browsers have different implementations. I have encountered changing the currentTime attribute to seek before, and occasionally the error event will be triggered, but the error only says that it is a network error. Without any other information, it was really painful to determine that it was a video transcoding problem after comparing other videos. During the playback of a live stream, occasional streaming exceptions may occur. Streaming exceptions generally appear as screen freezes and may not necessarily trigger error events. I refer to the previous Qingguo colleague's plan: check currentTime every once in a while, if currentTime does not change during this period of time in the playback state, it is likely that the stream is abnormal, and then actively reload.
,
3. Some problems that cannot be solved at present
There are many video-related problems on ios, because the system has too many restrictions. List a little bit:
1. Only one video or audio can be played at the same time, and only one video or audio tag is allowed. It will be a little troublesome to do the introductory advertisement function.
2. Play videos in Safari with lower ios version will force full screen, and ios 10 can use playsinline. You can add webkit-playsinline to WeChat and some customized webkits.
3. Without human operation, it is impossible to enter the page to automatically start playing the video
4. In ios, js cannot be used to control the video volume, it can only be controlled by physical buttons. In ios, you can directly hide the volume control function. . .
5. There is also the issue of taking screenshots, but there is no research if it is not used in the product.
There are also many problems on Android, mainly because there are too many Android versions, too many models, and all aspects are uneven. List a little bit:
1. Some android systems will directly replace the video tag and use the system player to play, which is common in domestic mobile phones
2. The detection result of the canPlayType method does not match the actual situation. This problem has been encountered during the development process. For example, it was detected that m3u8 playback is not supported on an Asus mobile phone, but it can actually be played. I originally wanted to let go of this restriction, but later found Forced playback in the webview of the Cloud Classroom app may cause the app to crash, so the detection is added at the end. .
3. Androids that do not support m3u8 playback are generally around android4.0 and below
|
|
|
|
How far(long) the transmitter cover?
The transmission range depends on many factors. The true distance is based on the antenna installing height , antenna gain, using environment like building and other obstructions , sensitivity of the receiver, antenna of the receiver . Installing antenna more high and using in the countryside , the distance will much more far.
EXAMPLE 5W FM Transmitter use in the city and hometown:
I have a USA customer use 5W fm transmitter with GP antenna in his hometown ,and he test it with a car, it cover 10km(6.21mile).
I test the 5W fm transmitter with GP antenna in my hometown ,it cover about 2km(1.24mile).
I test the 5W fm transmitter with GP antenna in Guangzhou city ,it cover about only 300meter(984ft).
Below are the approximate range of different power FM Transmitters. ( The range is diameter )
0.1W ~ 5W FM Transmitter ：100M ~1KM
5W ~15W FM Ttransmitter : 1KM ~ 3KM
15W ~ 80W FM Transmitter : 3KM ~10KM
80W ~500W FM Transmitter : 10KM ~30KM
500W ~1000W FM Transmitter : 30KM ~ 50KM
1KW ~ 2KW FM Transmitter : 50KM ~100KM
2KW ~5KW FM Transmitter : 100KM ~150KM
5KW ~10KW FM Transmitter : 150KM ~200KM
How to contact us for the transmitter?
Call me +8618078869184 OR
Email me [email protected]
1.How far you want to cover in diameter ?
2.How tall of you tower ?
3.Where are you from ?
And we will give you more professional advice.
About Us
FMUSER.ORG is a system integration company focusing on RF wireless transmission / studio video audio equipment / streaming and data processing .We are providing everything from advice and consultancy through rack integration to installation, commissioning and training.
We offer FM Transmitter, Analog TV Transmitter, Digital TV transmitter, VHF UHF Transmitter, Antennas, Coaxial Cable Connectors, STL, On Air Processing, Broadcast Products for the Studio, RF Signal Monitoring, RDS Encoders, Audio Processors and Remote Site Control Units, IPTV Products, Video / Audio Encoder / Decoder, designed to meet the needs of both large international broadcast networks and small private stations alike.
Our solution has FM Radio Station / Analog TV Station / Digital TV Station / Audio Video Studio Equipment / Studio Transmitter Link / Transmitter Telemetry System / Hotel TV System / IPTV Live Broadcasting / Streaming Live Broadcast / Video Conference / CATV Broadcasting system.
We are using advanced technology products for all the systems, because we know the high reliability and high performance are so important for the system and solution . At the same time we also have to make sure our products system with a very reasonable price.
We have customers of public and commercial broadcasters, telecom operators and regulation authorities , and we also offer solution and products to many hundreds of smaller, local and community broadcasters .
FMUSER.ORG has been exporting more than 15 years and have clients all over the world. With 13 years experience in this field ,we have a professional team to solve customer's all kinds of problems. We dedicated in supplying the extremely reasonable pricing of professional products & services. Contact email : [email protected]
Our Factory
We have modernization of the factory . You are welcome to visit our factory when you come to China.
At present , there are already 1095 customers around the world visited our Guangzhou Tianhe office . If you come to China , you are welcome to visit us .
At Fair
This is our participation in 2012 Global Sources Hong Kong Electronics Fair . Customers from all over the world finally have a chance to get together.
Where is Fmuser ?
You can search this numbers " 23.127460034623816,113.33224654197693 " in google map , then you can find our fmuser office .
FMUSER Guangzhou office is in Tianhe District which is the center of the Canton . Very near to the Canton Fair , guangzhou railway station, xiaobei road and dashatou , only need 10 minutes if take TAXI . Welcome friends around the world to visit and negotiate .
Contact: Sky Blue
Cellphone: +8618078869184
WhatsApp: +8618078869184
Wechat: +8618078869184
E-mail: [email protected]
QQ: 727926717
Skype: sky198710021
Address: No.305 Room HuiLan Building No.273 Huanpu Road Guangzhou China Zip:510620
|
|
|
|
English: We accept all payments , such as PayPal, Credit Card, Western Union, Alipay, Money Bookers, T/T, LC, DP, DA, OA, Payoneer, If you have any question , please contact me [email protected] or WhatsApp +8618078869184
-
PayPal.  www.paypal.com
We recommend you use Paypal to buy our items ,The Paypal is a secure way to buy on internet .
Every of our item list page bottom on top have a paypal logo to pay.
Credit Card.If you do not have paypal,but you have credit card,you also can click the Yellow PayPal button to pay with your credit card.
---------------------------------------------------------------------
But if you have not a credit card and not have a paypal account or difficult to got a paypal accout ,You can use the following:
Western Union.  www.westernunion.com
Pay by Western Union to me :
First name/Given name: Yingfeng
Last name/Surname/ Family name: Zhang
Full name: Yingfeng Zhang
Country: China
City: Guangzhou
|
---------------------------------------------------------------------
T/T . Pay by T/T (wire transfer/ Telegraphic Transfer/ Bank Transfer)
First BANK INFORMATION (COMPANY ACCOUNT):
SWIFT BIC: BKCHHKHHXXX
Bank name: BANK OF CHINA (HONG KONG) LIMITED, HONG KONG
Bank Address: BANK OF CHINA TOWER, 1 GARDEN ROAD, CENTRAL, HONG KONG
BANK CODE: 012
Account Name : FMUSER INTERNATIONAL GROUP LIMITED
Account NO. : 012-676-2-007855-0
---------------------------------------------------------------------
Second BANK INFORMATION (COMPANY ACCOUNT):
Beneficiary: Fmuser International Group Inc
Account Number: 44050158090900000337
Beneficiary's Bank: China Construction Bank Guangdong Branch
SWIFT Code: PCBCCNBJGDX
Address: NO.553 Tianhe Road, Guangzhou, Guangdong,Tianhe District, China
**Note: When you transfer money to our bank account, please DO NOT write anything in the remark area, otherwise we won't be able to receive the payment due to government policy on international trade business.
|
|
|
|
* It will be sent in 1-2 working days when payment clear.
* We will send it to your paypal address. If you want to change address, please send your correct address and phone number to my email [email protected]
* If the packages is below 2kg,we will be shipped via post airmail, it will take about 15-25days to your hand.
If the package is more than 2kg,we will ship via EMS , DHL , UPS, Fedex fast express delivery,it will take about 7~15days to your hand.
If the package more than 100kg , we will send via DHL or air freight. It will take about 3~7days to your hand.
All the packages are form China guangzhou.
* Package will be sent as a "gift" and declear as less as possible,buyer don't need to pay for "TAX".
* After ship, we will send you an E-mail and give you the tracking number.
|
|
|
For Warranty .
Contact US--->>Return the item to us--->>Receive and send another replace .
Name: Liu xiaoxia
Address: 305Fang HuiLanGe HuangPuDaDaoXi 273Hao TianHeQu Guangzhou China.
ZIP:510620
Phone: +8618078869184
Please return to this address and write your paypal address,name,problem on note: |
|
