HTML 视频

హ్ట్మ్ల్ లో వీడియోను ప్లే చేయడానికి అనేక పద్ధతులు ఉన్నాయి.

实例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

亲自试一试

సమస్యలు, సమస్యలు, మరియు పరిష్కారాలు

హ్ట్మ్ల్ లో వీడియోను ప్లే చేయడం సులభం కాదు!

మీ వీడియో ఫైల్స్ అన్ని బ్రౌజర్లలో (ఇంటర్నెట్ ఎక్స్ప్లోరర్, చ్రోమ్, ఫైర్ఫాక్స్, సఫారీ, ఓపెరా) మరియు అన్ని హార్డ్వేర్లలో (పిసి, మ్యాక్, ఐప్యాడ్, ఐఫోన్) ప్లే అవుతాయి అని నిర్ధారించుటకు, మీరు ఎక్కువ నెట్టుకలు చేయాలి.

ఈ చాప్టర్లో, Codew3c.com మీకు సమస్యలు మరియు పరిష్కారాలను సమర్పిస్తుంది.

<embed> టాగ్ ఉపయోగించండి

<embed> టాగ్ యొక్క విధి హ్ట్మ్ల్ పేజీలో మీడియా అంశాలను ముడిపెట్టడం.

ఈ హ్ట్మ్ల్ కోడ్ వెబ్ పేజీలో ముడిపెట్టిన ఫ్లాష్ వీడియోను చూపుతుంది:

实例

<embed src="movie.swf" height="200" width="200"/>

亲自试一试

సమస్య

  • హ్ట్మ్ల్ 4 మీది <embed> టాగ్ ను గుర్తించలేదు. మీ పేజీ పరిశీలన విఫలమైంది.
  • బ్రౌజర్ ఫ్లాష్ నమ్మకముండితే, వీడియోను ప్లే చేయలేదు
  • ఐప్యాడ్ మరియు ఐఫోన్ ఫ్లాష్ వీడియోలను ప్రదర్శించలేదు.
  • మీరు వీడియోను ఇతర ఫార్మాట్ లో మార్చినట్లయితే, అది అన్ని బ్రౌజర్లలో ప్లే అవుతుంది కాదు.

<object> టాగ్ ఉపయోగించండి

<object> టాగ్ యొక్క విధి హ్ట్మ్ల్ పేజీలో మీడియా అంశాలను ముడిపెట్టడం.

ఈ హ్ట్మ్ల్ పొరుగున మీరు వెబ్ పేజీలో ముడిపెట్టిన ఫ్లాష్ వీడియోను చూడవచ్చు:

实例

<object data="movie.swf" height="200" width="200"/>

亲自试一试

సమస్య

  • బ్రౌజర్ ఫ్లాష్ నమ్మకముండితే, వీడియోను ప్లే చేయలేదు.
  • ఐప్యాడ్ మరియు ఐఫోన్ ఫ్లాష్ వీడియోలను ప్రదర్శించలేదు.
  • మీరు వీడియోను ఇతర ఫార్మాట్ లో మార్చినట్లయితే, అది అన్ని బ్రౌజర్లలో ప్లే అవుతుంది కాదు.

వీడియో> టాగ్ ఉపయోగించండి

వీడియో> అనేది హ్ట్మ్ల్ 5 లోని కొత్త టాగ్.

<video> టాగ్ యొక్క పరిణామం హెచ్చిన పేజీలో వీడియో ఎలిమెంట్ను అంకురించడం.

క్రింది HTML పార్టు వెబ్ పేజీలో అంకురించబడిన ogg, mp4 లేదా webm ఫార్మాట్ల వీడియోను ప్రదర్శిస్తుంది:

实例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
మీ బ్రౌజర్ వీడియో టాగ్ ను అనుమతించడానికి సహాయపడదు.
</video>

亲自试一试

సమస్య

  • మీరు వీడియోను అనేక విభిన్న ఫార్మాట్లకు మార్చవలసివుంది.
  • <video> ఎలిమెంట్ను పాత బ్రౌజర్లో అనుమతించబడదు.
  • <video> ఎలిమెంట్ను HTML 4 మరియు XHTML పరిశీలనలో అనుమతించబడదు.

ఉత్తమ HTML పరిష్కారం

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

亲自试一试

పై ఉదాహరణలో 4 రకాల వీడియో ఫార్మాట్లను ఉపయోగించబడింది. HTML 5 <video> ఎలిమెంట్ను మీరు mp4, ogg లేదా webm ఫార్మాట్లలో ఏదైనా ప్లే చేయడానికి ప్రయత్నిస్తుంది. అన్ని విఫలమయ్యాక మరియు <embed> ఎలిమెంట్కు తిరిగి వెళ్తుంది.

సమస్య

  • మీరు వీడియోను అనేక విభిన్న ఫార్మాట్లకు మార్చవలసివుంది.
  • <video> ఎలిమెంట్ను HTML 4 మరియు XHTML పరిశీలనలో అనుమతించబడదు.
  • <embed> ఎలిమెంట్ను HTML 4 మరియు XHTML పరిశీలనలో అనుమతించబడదు.

ప్రకటన:<!DOCTYPE html> (HTML5) ఉపయోగించడం ద్వారా పరిశీలన సమస్యలను పరిష్కరించండి.

యుకు పరిష్కారం

వెబ్ పేజీలో వీడియోను ప్రదర్శించడానికి అత్యంత సులభమైన విధానం HTML వెబ్ సైట్లను ఉపయోగించడం.

మీరు వెబ్ పేజీలో వీడియో ప్లే చేయడానికి కావాలిగానే, వీడియోను యుకు వంటి వీడియో వెబ్ సైట్లకు అప్లోడ్ చేసి, అప్పుడు మీ వెబ్ పేజీలో HTML కోడ్ని ప్రవేశపెట్టి వీడియోను ప్లే చేయవచ్చు:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">

亲自试一试

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件：

实例

Play a video file

亲自试一试

关于内联视频的一段注释

当视频被包含在网页中时，它被称为内联视频。

如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。

同时请注意，用户可能已经关闭了浏览器中的内联视频选项。

我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。

హెచ్టిఎంఎల్ 4.01 మ్యూడియా టాగ్స్

టాగ్ వివరణ
<applet> అనుమతించబడలేదు.ప్రత్యేకించి ఇంటర్నల్ applet నిర్వహిస్తుంది.
<embed> అనుమతించబడలేదు.ప్రత్యేకించి ఇంటర్నల్ పదార్థాన్ని నిర్వహిస్తుంది. (హెచ్టిఎంఎల్ 5 లో అనుమతించబడింది)
<object> ప్రత్యేకించి ఇంటర్నల్ పదార్థాన్ని నిర్వహిస్తుంది.
<param> పదార్థం పరమాణులను నిర్వహిస్తుంది.

హెచ్టిఎంఎల్ 5 మ్యూడియా టాగ్స్

టాగ్ వివరణ
<video> టాగ్ లో ధ్వని, ఉదాహరణకు సంగీతం లేదా ఇతర ఆడియో స్ట్రీమ్ నిర్వహిస్తుంది.
<embed> టాగ్ లో ప్రత్యేకించి ఇంటర్నల్ కంటెంట్ నిర్వహిస్తుంది, ఉదాహరణకు ప్లగ్ఇన్స్ వంటి వాటిని.